Question

我有2个函数均共享错误状态。我需要componentDidUpdate函数中的setState根据先前的状态来更新错误状态。这是因为当前我可以得到2个错误状态，它们的状态取决于调用生命周期函数的时间。

state = {
  word: this.props.word,
  error: '',
}


async componentDidMount() {
  const word = this.props.match.params.word;
  try{
    const data = await MerriamAPI.getWordInfo(word);
    if (data.length && data[0].fl && data[0].meta.stems && data[0].hwi.prs[0].mw && data[0].shortdef[0]) {
      this.setState({
        word: word,
        error: '',
       })
      }
    else {
      console.log("Error")
      this.setState({error:'Word Not Found'})
    }
  }
  catch {
    this.props.setModal('Offline');
  }
}


async componentDidUpdate() {
  const word = this.props.match.params.word;
  if (word != this.state.word){
    try{
      const data = await MerriamAPI.getWordInfo(word);
      if (data.length && data[0].fl && data[0].meta.stems && data[0].hwi.prs[0].mw && data[0].shortdef[0]) {
        this.setState({
          word: word,
          error: '',
         })
        }
      else {
        // Need to set this based on previous value
        this.setState({error: 'Word Not Found'})
      }
    }
    catch {
      this.props.setModal('Offline');
    }
    }
  }

Answer 1

setState可以使用将先前状态作为参数的函数回调来调用。

this.setState((prevState) => ({
   val: prevState.val + 1)
}));

Answer 2

React docs：

如何使用取决于当前状态的值更新状态？

向setState传递一个函数而不是对象，以确保调用始终使用最新的state版本。

incrementCount() {
  this.setState((state) => {
    // Important: read `state` instead of `this.state` when updating.
    return {count: state.count + 1}
  });
}

因此，定义一个方法，该方法可以使用状态对象并返回新的状态对象，然后将其传递给setState。

根据先前状态设置状态

2 个答案: