reactjs - 如何在使用扩展运算符时使用 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 的值在这里没有增加..

标签： reactjssetstate

Answer 1

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

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