Question

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

版本：

打字稿v3.0.3
本机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"}
};

看看在test的{{1}}中是否看到console.log(this.props)

如果是这样，则需要按以下方式映射对象：

componentDidMount()

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

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为您。否则，您将花费大量时间来尝试理解经常无法理解的错误消息。

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

2 个答案: