在 componentWillMount 的 redux 检查状态

Posted 2023-02-19

【中文标题】在 componentWillMount 的 redux 检查状态

【英文标题】：redux check state at componentWillMount

【发布时间】：2017-04-24 19:48:49

【问题描述】：

在我的 react 组件中，状态中有两个属性，一个在本地反应状态，另一个在 Redux 存储中。

    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 和 true，我正在显示不同的按钮）。 我在componentWillMount()... this.setState(editeMode:_.isNull(this.props.currentExercise)) 中尝试过（使用 lodash） 但它不起作用，它仍然是错误的。 一般来说，在这些情况下，首先应该获取一些东西然后检查它，应该是什么方法。

【参考方案1】：

您应该避免在 componentWillMount (docs) 中引入任何副作用或订阅。文档还说“在这个方法中设置状态不会触发重新渲染”，所以我猜这意味着设置的值将被忽略。

除非this.props.currentExercise 的值发生更改，否则您不会更改存储中的editeMode 条目的值，因此跟踪更改以更新存储没有多大用处。直接使用该值即可。在您的特定情况下，我会执行以下操作：

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);

【参考方案2】：

将代码放入 componentWillReceiveProps。

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

Redux 会确保 props 得到更新。

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