Question

我正在学习使用redux进行反应和打字稿。我有一个这样的子组件：

import ...
interface MainTestProps {
   loadData: () => () => void,
   students: StudentsModel[],
   state: string,
   errorMessage?:string
}

interface MainTestState {
}

class MainTest extends React.Component<MainTestProps,MainTestState>{

constructor(props: MainTestProps, state: MainTestState){
    super(props,state);

}

.... rest of component
const mapStateToProps = (state:AppState, ownProps: MainTestProps)=> {
    return {
      students: [],
      state: 'INIT',
      errorMessage:''
    }
}
const mapDispatchToProps = (dispatch: any) => {
   return {
       loadData: () => dispatch(actionFetchStudents())
   }
}

export default connect(mapStateToProps,mapDispatchToProps) (MainTest);

为什么我调用此组件会收到错误类型“ {}”，但类型“ Readonly＆MainTestProps>”缺少以下属性：loadData，students，状态ts（2739）。我的意思是我不想传递属性，我正在使用redux ！！！打字稿redux库中是否有错误，或者为什么我必须传递数据，或者我对mapStateToProps的声明是错误的，所以我必须忽略参数ownProps。

谢谢大家阿诺德

Answer 1

您能显示一下如何调用此MainTest组件吗？由于您只是通过Redux添加loadData，因此其他参数students和state仍应作为prop传递给组件。 errorMessage道具是可选的，因此编译器不会抱怨它。

编译器抱怨loadData道具的原因很可能是因为您在MainTestProps中提供的类型与loadData函数的类型不对应。我只能猜测，因为我没有actionFetchStudents的实际实现，但是看来loadData的类型应该是loadData: () => void;，而不是loadData: () => () => void;。 / p>

查看是否可行，否则请提供actionFetchStudents的实现以及调用MainTest的函数。

Answer 2

interface State {}

interface OwnProps {}

interface DispatchProps {
    login: () => void;
}

interface StateProps {
    isFetching: boolean;
    accessToken: string;
}

type Props = StateProps & OwnProps & DispatchProps;

const ExampleTH = (props: Props): ReactElement => {

您可以使用类似这样的东西，它在反应16.8.4时会起作用

用打字稿反应Redux

2 个答案: