功能 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)    });  }