Блог

Главная - Вопросы по программированию - Mapstatetпропускается на функциональный компонент с включенной компоновкой типов

Mapstatetпропускается на функциональный компонент с включенной компоновкой типов

#reactjs #redux #eslint #react-proptypes

Вопрос:

У нас есть правило линтинга, которое делает React prop-типами необходимыми.

Поэтому мой файл выглядит следующим образом:

 const MyComponent = ({ prop1, prop2 }) => (
    <div>
        {*/ Do stuff here */}
    </div>
)

myComponent.propTypes = {
    prop1: PropTypes.any.isRequired,
    prop2: PropTypes.any.isRequired,
}

export default MyComponent

И он используется в родительском компоненте, как это:

 <MyComponent prop1="Hello" prop2="World" />

Теперь я хочу подключить этот функциональный компонент к Redux, поэтому теперь у меня есть это:

 import { connect } from 'react-redux'

...

const mapStateToProps = state => {
    return {
        prop3: state.area.prop3
    }
}

export default connect(mapStateToProps)(MyComponent)

Моя проблема заключается в следующем: когда я пытаюсь добавить prop3 так:

 const MyComponent = ({ prop1, prop2, prop3 }) => {...}

Мой линтер жалуется, что:

 'prop3' is missing in props validation eslint(react/prop-types)

Хорошо, поэтому я пойду, чтобы добавить его:

 myComponent.propTypes = {
    prop1: PropTypes.any.isRequired,
    prop2: PropTypes.any.isRequired,
    prop3: PropTypes.any.isRequired,
}

Но теперь родительский компонент имеет ошибку:

 Property 'prop3' is missing in type '{ prop1: any; prop2: any; }' but required in type 'Pick<Pick<Omit<{ prop1: any; prop2: any; prop3: any; }...

Я полагаю, что я мог бы сделать prop3 не обязательным и включить a defaultProps , но мне это кажется неправильным, так как я всегда буду хватать его из состояния.

Как мне подключиться к состоянию Redux, одновременно решая проблемы, связанные с типами свойств?

Правка: Я бы предпочел не просто отключать линтинг. Похоже на взлом, и должен быть способ заставить это работать.

Комментарии:

1. Если вы можете, просто используйте крючки Redux. Никаких соединений, никаких реквизитов, никаких типов реквизита. react-redux.js.org/api/hooks

2. Мне нужно connect , потому что это данные о состоянии, которые я извлекаю и сопоставляю props , и мне нужно prop-types каким-то образом выполнить компоновку, потому что это правило включено для всей нашей кодовой базы.

3. @noblerare Вы пробовали что-то вроде того, чтобы вместо этого использовать типы реквизитов connect(mapStateToProps)(MyComponent) MyComponent ? Вы можете переместить объект подключения в переменную.

4. @noblerare Я не уверен, что понимаю. Вам нужен доступ к этим значениям данных состояния в вашем компоненте. Не должно быть необходимости, чтобы они входили через подпорки. Вы также можете получить их с useSelector помощью . connect к настоящему времени это устаревший api при работе с Redux, и крючки официально рекомендуются для доступа к хранилищу из функциональных компонентов. redux.js.org/style-guide/style-guide/…

Метки: