如何在使用扩展运算符时使用 setState 更新多个状态变量？

Question

在我的组件中，状态如下所示：

this.state = {
            userAnswers:{},
            numAnswered:0
        }

我有一个方法，当被调用时，应该在 userAnswers 中添加或重新设置一个键值对，它还应该将 numAnswered 增加 1

此代码有效：

 handleUserAnswer = (questionId, answer) => {

    
        this.setState(prevState => ({
         
          userAnswers: {
              ...prevState.userAnswers,
              [questionId]:answer
          }

        
      }),() => console.log(this.state))

      this.setState(prevState =>({
      numAnswered:prevState.numAnswered+1

     }), ()=> console.log(this.state))

    }

但是我怎样才能做到这一点而不必使用 setState 两次呢？例如，为什么以下不起作用？

 handleUserAnswer = (questionId, answer) => {

    
        this.setState(prevState => ({
         
          userAnswers: {
              ...prevState.userAnswers,
              [questionId]:answer,
              numAnswered:prevState.numAnswered+1

          }

        
      }),() => console.log(this.state))

    }

此处 numAnswered 的值未递增..

Answer 1

在第二种情况下，您在 userAnswers 中更新 numAnswered，而不是直接在状态中更新。试试这个：

handleUserAnswer = (questionId, answer) => {
    this.setState(prevState => ({  
        userAnswers: {
            ...prevState.userAnswers,
            [questionId]: answer,
        }.
        numAnswered:prevState.numAnswered + 1
    }), () => console.log(this.state))
}

如何在使用扩展运算符时使用 setState 更新多个状态变量？

How can I update multiple state variables using setState while using the spread operator?

setstate

reactjs