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

Question

在另一个调用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 )
        });
         }
    )

    )
}

Answer 1

是的，当您想基于第一个设置另一个状态时，您可以将另一个 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)

Answer 2

我建议不要像那样进行 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
      )
    };
  });
}

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

Pass setState as a callback to another setState

setstate

reactjs