功能 setState 在 REACT 中不起作用

Question

这是直接使用状态对其进行操作的问题，相反，ReactJS 提供了一个回调版本setState，允许您currentState在执行时作为参数访问 。您可以将其用作：setCpyBtn((currentState) => {  return currentState.map((item, i) => {    if (i === index) {      return 'Copy';    }    return 'Copied';  });})当然反之亦然。文档

Answer 1

你那里有一个巨大的反模式。state首先，初始化inconstructor只是为了重新初始化 in是没有意义的componentDidMount。

因此，除非componentDidMount它本身是异步的，否则你甚至都不应该在其中使用（即使你尝试这样做，React 团队的默认配置实际上也会在他们的eslint-react-pluginsetState中引发错误——顺便说一下，我强烈推荐你安装，非常适合初学者帮助防止常见的反模式或常见错误）。

更不用说，state它本身是异步的，所以它不会在你改变它的那一刻更新。此外，我认为您正在尝试在这里学习，但是以防万一此代码用于实际生产，您总是可以简单地在构造函数中声明它

本质上，您的代码可能只是

class Form extends Component {

  constructor(props) {

    super(props)

    this.state = {

      // rest of your state ...

      id: 5

    }

  }

  componentDidMount() {

    const { id } = this.state

    alert(id)

  }

}

至于代码本身，正如我所提到的，setState它是一个异步操作，它会立即更新状态。要记住的一条重要规则，任何时候你设置状态并想要使用更改的值，你应该提供一个回调

setState定义如下setState(Function => Object | Object, callbackFunction)

所以本质上，你想在你的代码中做的是

this.setState(setStateFunction, () => alert(this.state.id))

Answer 2

更新 React 组件的状态是异步的。它不会立即发生。

由于setState是异步的，因此即使通过传递函数，也可能不会在您调用它时立即反映更改。如果要检查值是否正在更新，可以使用setState如下结果的回调进行检查。

componentDidMount() {

    function setStateFunction(state, props) {

      const newState = {...state, id: 5};

      return newState;

    }

    this.setState(setStateFunction, () => {

      alert(this.state.id)

    });

  }