Question

我在使用React-Redux和React-Router时遇到问题，并且connect函数未将redux状态映射到我的道具。

问题：在一个使用Redux存储的组件中，该Redux存储映射到该组件的prop。明智地导航到新的url程序。新组件没有将redux存储映射到其prop。

这是我相关的依赖项：

"react-dom": "16.8.5",
"react-redux": "6.0.1",
"react-redux-loading-bar": "4.2.0",
"react-router-dom": "5.0.0",

这是我的第一个组成部分：

export interface IMyEntityUpdateProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}

export interface IMyEntityUpdateState {
}

export class MyEntityUpdate extends React.Component<IMyEntityUpdateProps, IMyEntityUpdateState> {

  constructor(props) {
    super(props);
    // This prop constructor is filled up with getEntity, ..., all the mapped stuff 
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextProps.updateSuccess !== this.props.updateSuccess && nextProps.updateSuccess) {
      **// THIS NAVIGATES TO THE COMPONENT BUT THE PROPS IN THE CONSTRUCTOR IS NULL**
      this.props.history.push(`/my-entity/${nextProps.myEntity.id}/edit/page-2`);
    }
  }

  componentDidMount() {
      this.props.getEntity(this.props.match.params.id);
  }

  saveEntity = (event, errors, values) => {
        const {myEntity} = this.props;
        const entity = {
          ...myEntity,
          ...values
        };

        if (this.state.isNew) {
          this.props.createEntity(entity);
        } else {
          this.props.updateEntity(entity);
        }
  };

  render() {
    return (
        <div>
            <Some-Button-That-Calls-Save-Entity />
        </div>
    )
  }
}

const mapStateToProps = (storeState: IRootState) => ({
  myEntity: storeState.myEntity.entity,
  loading: storeState.myEntity.loading,
  updating: storeState.myEntity.updating,
  updateSuccess: storeState.myEntity.updateSuccess,
});

const mapDispatchToProps = {
  getEntity,
  updateEntity,
  createEntity,
  reset
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

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

这是我的第二部分：

export interface IMyEntityUpdateTwoProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}

export interface IMyEntityUpdateTwoState {
}

export class MyEntityUpdateTwoSecondPage extends React.Component<IMyEntityUpdateTwoProps, IMyEntityUpdateTwoState> {

  constructor(props) {
    super(props);
    // props not populated
    // this.props.getEntity == null 
    // What is going on here????
  }



  componentDidMount() {
    this.props.getEntity(this.props.match.params.id);
  }


  render() {
    return (
        <div> Some Content </div>
        );  
    }
}

const mapStateToProps = (storeState: IRootState) => ({
  myEntity: storeState.myEntity.entity,
});

const mapDispatchToProps = {
  getEntity
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

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

我的减速机。具有getEntity方法等。

为什么当我使用“推”从第一个组件导航到第二个组件时，在props方法中没有得到“ getEntity”方法（或任何其他prop）？

连接映射不正确吗？

当我在开发控制台中打印道具时，我在redux存储中看到了某些东西，这些东西表明redux存储中有我需要的东西。发生了什么事？

React-Router：浏览器历史记录推送导致组件无法连接到React Store

0 个答案: