ReactJS setState 不适用于 method/function 中的 parameter/argument

Question

我似乎无法让 setState 更改（变异）来自参数或 method/function 参数的值。至少，它在第一次通话时不起作用。我必须在值更改之前调用 setState 两次。

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      testItem: 'originalValue'
    }
  }

  updateState(input) {
    this.setState({
      testItem: input
    },
      console.log(this.state.testItem) // displays 'originalValue' instead of 'newValue!', at least on the first call
    )
  }

  render() {
    return (
      <button onClick={() => this.updateState('newValue!')}>
        Change State
        </button>
    )
  }
}

export default App

当按钮按下时，'testItem' 的状态应该从 'originalValue' 变为 'newValue!'（取自方法 'updateState(input)' 中的参数 'input'）单击，但它不会在第一次单击时改变（即使在 setState 中使用回调）。只有当我第二次点击按钮时它才会改变。这是为什么？

Answer 1

现在，console.log 会直接调用当前状态，这是您设置的初始状态，因为 setState 是异步的（即状态不会立即更新为最新更改）。

因此，我们需要将 console.log 包装在一个函数中来延迟调用。我们这样做是为了稍后 setState 可以调用它，而不是每次调用 setState

为此，您传递一个回调函数，该函数将在您的 setState 执行后执行。

this.setState({ testItem: input}, () => console.log(this.state))

Answer 2

发生这种情况是因为在更新状态之前，console.log(this.state.testItem) 已经是运行。因为 setState 本质上是异步的。为了避免它：

黑客解决方案-使用setTimeout（等到它更新）

   updateState(input) {
    this.setState({
      testItem: input
    });
    setTimeOut (() => {
      console.log(this.state.testItem)
    }) 
  }

首选方式 - 将回调作为第二个参数传递

   updateState(input) {
    this.setState({
      testItem: input
    }, () => console.log(this.state.testItem))
   }

Answer 3

This is happening because setState is asynchronous. You could use a callback or async-await. A callback solution is already given. I would like to give the solution with async-await -

async updateState(input) {
    await this.setState({
      testItem: input
    });
    console.log(this.state.testItem);
}

ReactJS setState 不适用于 method/function 中的 parameter/argument

ReactJS setState doesn't work with a parameter/argument from a method/function

javascript

setstate

reactjs