react-redux无法达到的组件道具

Question

上下文 ：Simple React Native应用程序利用Redux来管理复杂性。

版本 ：

• 打字稿v3.0.3
• react-native v0.56.0
• redux v4.0.0
• @ types / react-redux v6.0.9
• @ types / redux v3.6.0

问题 ：我的JSX主组件看不到属性（注释中包含的错误）。

第一个文件：

//app.tsx
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <MainRedux ownProp="as"/> //[1]: Type '{ ownProp: string; }' is not assignable to type 'Readonly<AllProps>'. Property 'appPermissions' is missing in type '{ ownProp: string; }'.
      </Provider>
    );
  }
}

第二个文件：

//MainRedux.tsx
export interface ApplicationState { //originally in another file
  appPermissions: AppPermissionsState;
  //...
}

type StateProps = ApplicationState; //alias appPermissions is in the Application State

interface DispatchProps {
  getPermissions: typeof getPermissions;
  //...
}

interface OwnProps {
  ownProp: string;
}

type AllProps = StateProps & DispatchProps & OwnProps;

export class MainRedux extends React.Component<AllProps> {
  constructor(props: AllProps) {
    super(props);
    props.getPermissions(); //[2]: TypeError: undefined is not a function (evaluating 'props.getPermissions()')
  }
  //...
} //class

//...
const mapStateToProps: MapStateToProps<
  StateProps,
  OwnProps,
  ApplicationState
> = (state: ApplicationState, ownProps: OwnProps): StateProps => {
  return state;
};

const mapDispatchToProps: MapDispatchToPropsFunction<
  DispatchProps,
  OwnProps
> = (dispatch: Dispatch<AnyAction>, ownProps: OwnProps): DispatchProps => ({
  getPermissions: bindActionCreators(getPermissions, dispatch)
  //...
});

export default connect<StateProps, DispatchProps, OwnProps, ApplicationState>(
  mapStateToProps,
  mapDispatchToProps
)(MainRedux);

而[1]是编译时错误，[2]是运行时错误。

谁能告诉我怎么了？ 先感谢您。

编辑：我将一些调试信息放入mapStateToProps和mapDispatchToProps ，但似乎connect不会调用它们。 我可以走得更远，并假设甚至没有调用connect 。

Answer 1

看起来就像国家到道具的映射

作为测试，您可以将其放在MapStateToProps函数中：

const mapStateToProps: MapStateToProps<StateProps,OwnProps,ApplicationState> = 
(state: ApplicationState, ownProps: OwnProps): StateProps => {
  return {test : "hello"}
};

并查看是否在componentDidMount() console.log(this.props)中看到test

如果是这样，则需要映射您的对象，以便：

return {
 propkey1 : state.propkey1,
 propkey2 : state.propkey2
 .... etc
}

但是，如果没有代码库，很难确定。

Answer 2

@MattMcCutchen的评论打了我。 毕竟， connect函数返回的修饰类不再是相同的组件类，例如MyComponent而是完全不同的类，例如， let ConnectedMyCommponent = connect(...)可以将其导入，然后import {ConnectedMyComponent} from '.\\...'到带有父Provider标记的文件中，例如<Provider><ConnectedMyComponent></Provider>.

我的错误是，在重构代码时，我没有更改从import {MainRedux} from './...' import MainRedux from './...' 。

我会给从香草react-native到redux react-native的每个人一个简单的提示：在定义的组件类中处理每个export关键字，因为connect为您创建了一个新类。 否则，您将花费大量时间来尝试理解经常无法理解的错误消息。