将 setState 作为回调传递给另一个 setState答案

【问题标题】：Pass setState as a callback to another setState将 setState 作为回调传递给另一个 setState
【发布时间】：2019-12-02 06:39:48
【问题描述】：

在另一个回调中调用 setState 作为回调是否正确？这是我的一段代码。

这是我的初始状态：

state = {
    resumeCollection: [],
    filters: {
        educationLevels: [],
        educationFields: [],
        jobAdvertisementId: []
    }
};

这是一个 componentDidMount 部分：

componentDidMount() {



    this.setState(prevState =>( {filters : {
        jobAdvertisementId :    [...prevState.filters.jobAdvertisementId, {value: this.props.router.query.value, id: this.props.router.query.id}]}

    } 
    )
    , () => this.setState(state => { 

        return({

            resumeCollection : state.resumeCollection.filter(resume => resume.jobAdvertisementId == state.filters.jobAdvertisementId[0].id )
        });
         }
    )

    )
}

【问题讨论】：

setState 调用是批处理的，所以如果setState 有事情要做，最好结合起来
@tarzenchugh 我需要设置“jobAdvertisementId”，然后通过“jobAdvertisementId”值设置“resumeCollection”。

标签： reactjs setstate

【解决方案1】：

我建议不要进行这样的 2 次状态更新，因为它会引入无用的第二次渲染。

如果您需要根据状态的另一部分设置状态的一部分，您可以计算它并将其存储在 return 语句之外的变量中，并在需要的地方使用它。

在您的情况下，它可能看起来像这样：

componentDidMount() {
  this.setState(prevState => {
    const nextJobAdvertisementId = [
      ...prevState.filters.jobAdvertisementId,
      {
        value: this.props.router.query.value,
        id: this.props.router.query.id
      }
    ];
    return {
      filters: {
        jobAdvertisementId: nextJobAdvertisementId
      },
      resumeCollection: prevState.resumeCollection.filter(
        resume => resume.jobAdvertisementId === nextJobAdvertisementId[0].id
      )
    };
  });
}

【讨论】：

【解决方案2】：

是的，当您想基于第一个设置另一个状态时，您可以添加另一个 setState 作为回调的一部分到第一个 setState()。

在下面的示例中，我根据状态“a”设置了“b”状态：

例如

const setB = () => {
  if(this.state.a)
    this.setState({b:"Success"})
  else
    this.setState({b:"failure"})
}

this.setState({a:true},this.setB)

【讨论】：