用功能反應setState

Question

我正在嘗試使用函數回調在React組件中設置setState，這是現在推薦的方法。 它在componentDidMount中，當我取回工作數據時，我需要更新狀態。 當我直接設置它時它可以工作，但是我嘗試了函數回調並且無法使其工作。 下面提供的示例代碼是我的許多嘗試之一。

async componentDidMount(){
    const jobs = await loadJobs();
    this.setState({jobs});
    //this.setState((prevState, jobs) =>  {return {jobs: [prevState,...jobs]}})
}

正確的語法是什么？

Answer 1

當您要基於prevState更新當前狀態時，只需使用功能性setState，在這種情況下，您似乎只想設置狀態作業，您只需編寫

this.setState({jobs});

但是，如果要使用功能性setState，您仍然可以編寫

  this.setState((prevState) =>  {
     return {jobs};
  })

您需要通過從prevState獲取值並將結果附加到先前的狀態來更新作業，您可以這樣做

async componentDidMount(){

    const jobs = await loadJobs();
    this.setState((prevState) =>  {
       return {jobs: [...prevState.jobs, ...jobs]}
    })

}