Question

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

/new-exe/:id

所以根据路径; Redux中的currentExercise currentExercise为空或者提取了一些内容。 editeMode在React中。现在我想检查editemode:true componentWillMount(){... this.setState({editeMode:_.isNull(this.props.currentExercise)})}中是否有东西，否则它应该是假的（根据false和true我显示不同的按钮）。我在->add('registered', DateType::class, array( 'widget' => 'single_text', 'input' => 'string', 'format' => 'yyyy-MM-dd', 'data' => $registered, 'attr' => array( 'placeholder' => 'yyyy-MM-dd', ) ))中尝试过（使用lodash）但它不起作用，它是假的。在这些情况下，首先应该取一些东西，然后检查它，应该是什么方法。

Answer 1

将代码放入componentWillReceiveProps。

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

Redux将确保道具得到更新。

您还应该考虑将editMode状态置于Redux中。

Answer 2

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

除非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检查状态

2 个答案: