Typescript с просьбой передать реквизиты, хотя они уже пройдены mapStateToProps - PullRequest
Новая
       49

Typescript с просьбой передать реквизиты, хотя они уже пройдены mapStateToProps

0 голосов
/ 28 января 2020

Это мой ChildComponent , получающий foo реквизит от Redux. 

interface InjectedProps {
  foo: string;
}

const ChildComponent: React.FC<InjectedProps> = ({ foo, }) => (
    <div>
      {foo}
    </div>
);

const mapStateToProps = (state: AppState): InjectedProps => ({
  foo: state.fooReducer.foo,
});

export default connect(mapStateToProps, null)(ChildComponent);

ChildComponent заключен в ParentComponent . 

const ParentComponent: React.FC = () => (
  <div>
    <ChildComponent />
  </div>
);

Машинопись выдает ошибку, чтобы передать foo , выдавая себя за <ChildComponent foo="some value"/>, но я не хочу этого делать, так как Redux неявно передается. 

Property 'foo' is missing in type '{}' but required in type 'Pick<InjectedProps, "foo">'.

Как мне решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Спасибо за ваш удивительный ответ. Я понял это. Хорошо, если вы посмотрите на экспорт ChildComponent . 

export default connect(mapStateToProps, null)(ChildComponent);

Ошибка, которую я сделал, заключается в том, что я указал null , потому что mapDispatchToProps не используется в этом компоненте. Я изменил его на {} и машинопись больше не выдавала ошибку.

Так что экспорт ChildComponent должен быть: 

export default connect(mapStateToProps, {})(ChildComponent);
0 голосов
/ 28 января 2020

Убедитесь, что вы импортируете свой дочерний компонент следующим образом: 

import ChildComponent from './ChildComponent'

Также, как и другие, предложили установить тип реагирования-редукции (yarn add @ types / Reaction-redux -D или npm install @ types / Reaction-redux -D).

Если это не сработает (должно, но не сработает), вы можете попробовать это: 

export default connect<InjectedProps>(mapStateToProps)(ChildComponent);

Вы можете указать наборы вручную для подключения, если он не работает автоматически.

...