componentWillMount 的 redux 检查状态

Question

在我的 React 组件中，状态中有两个属性，一个在本地 React 状态中，另一个在 Redux store 中。

    componentWillMount() {
      this.props.fetchExercise(this.props.params.id);
    }    
     constructor(props) {
       super(props); 
       this.state = {editeMode: false}
   }

    function mapStateToProps(state) {
      return {currentExercise: state.currentExercise}
   }

    export default connect(mapStateToProps, {fetchExercise})(createNewExercisePage);

所以根据路径； /new-exe/:id Redux 中的 currentExercise 为空或已获取某些内容。 editeMode 在 React 中。现在我想检查 currentExercise editemode:true 中是否有东西，否则它应该是 false（根据 false 和 true，我显示了不同的按钮）。我在 componentWillMount(){... this.setState({editeMode:_.isNull(this.props.currentExercise)})} 中尝试过（使用 lodash）但它不起作用，它仍然是错误的。通常在这些情况下，首先应该获取一些东西然后检查它，应该采用什么方法。

Answer 1

将代码放入componentWillReceiveProps。

componentWillReceiveProps(nextProps) {
  this.setState({ editeMode: !nextProps.currentExercise) });
}

Redux 将确保道具得到更新。

您还应该考虑将 editMode 状态放在 Redux 中。

Answer 2

您应该避免在 componentWillMount (docs) 中引入任何副作用或订阅。文档还说 "setting state in this method will not trigger a re-rendering"，所以我猜这意味着设置值将被忽略。

您不会更改商店中 editeMode 条目的值，除非 this.props.currentExercise 的值发生变化，因此跟踪为了更新商店。直接使用该值即可。在您的特定情况下，我会执行以下操作：

componentWillMount() {
  this.props.fetchExercise(this.props.params.id);
}    
constructor(props) {
   super(props); 
   this.state = {}
}

render(){
    const editeMode = _.isNull(this.props.currentExercise);
    // The rest of your render logic, using editeMode instead of this.state.editeMode
}

function mapStateToProps(state) {
   return {currentExercise: state.currentExercise}
}

export default connect(mapStateToProps, {fetchExercise})(createNewExercisePage);

componentWillMount 的 redux 检查状态

redux check state at componentWillMount

reactjs

redux

redux-thunk