Question

我有一个tagOptions状态，即使我有条件也可以连续更新，但我仍然使该组件呈现过多次，这将覆盖我的状态。任何人都可以给我一个肮脏的杉树，这样它只能更新一次。

state = { 
    tagOptions:[],
    value:[],
    init: false
  };

componentDidUpdate() {
    /* Gets hits from Algolia and ensures tagOptions is not overwritten by props.hits */
    if(!this.state.init) 
    {
      console.log(this.state.init)
      if(this.props.hits.length) {
        this.setState({ 
          ...this.state,
          init: true,
          tagOptions:this.transformHits(this.props.hits)
        }) 
      } 
    }  
    console.log("Update2",this.state.tagOptions) 
  }

Answer 1

我将使用setState的回调形式，看看是否有任何改变：

componentDidUpdate() {
  if (!this.state.init && this.props.hits.length) {
    this.setState(() => ({
      init: true,
      tagOptions: this.transformHits(this.props.hits),
    }));
  }
}

也许其他任何功能正在更新init，则此可以防止其被覆盖。

此外，您不需要在...this.state中进行setState，React应该为您处理。

Answer 2

componentDidUpdate()在更新发生后立即被调用。初始渲染未调用此方法。

因此，如果必须更改tagOptions状态，则从props.hits获取数据后，您可以添加检查，如果先前的props不等于当前的props

componentDidUpdate(prevProps) {
  if (this.props.hits.length && (this.props.hits !== prevProps.hits) ) {
    this.setState({
      tagOptions: this.transformHits(this.props.hits),
    });
  }
}

您不再需要更改初始化状态

ComponentDidUpdate状态不断变化

2 个答案: