PrevState 在 React JS 中不会立即更新状态值答案

【问题标题】：PrevState does not update state value immediately in React JSPrevState 在 React JS 中不会立即更新状态值
【发布时间】：2020-09-03 12:42:45
【问题描述】：

我正在尝试使用 prevState 立即更新状态值，但值不会改变。我知道 seState 是异步函数，但如果我使用 prevState，不应该立即更新吗？我在哪里做错了？

   count: 0

    this.setState((prevState) => ({
      count: prevState +1
    }));

    console.log(this.state.count+" count")

【问题讨论】：

"但是如果我使用 prevState，不应该立即更新吗？" 不，不管你使用什么形式的setState。它始终是异步的。
无论您是否使用之前的状态，状态都会异步更新。组件特定渲染中的状态和道具是恒定的。
我明白了，谢谢，那么有什么理由在更新状态后立即获得价值？
为什么在更新状态后立即获取值？ - 您无法在同一渲染中获取状态的更新值，但您可以传递第二个可选值回调到this.setState。状态更新后调用此回调。

标签： javascript reactjs setstate

【解决方案1】：

好的，你必须了解以下内容

function foo() {
  this.setState((prevState) => ({
    count: prevState + 1,
  }));
}

//call function first and then log
foo()
console.log(count) // here you will get your answer

记住一个父函数中任意数量的 this.setState 语句将在父函数结束后执行

【讨论】：

【解决方案2】：

你知道 setState 是异步的。但还要了解如果您在 setstate 中传递回调，那么您需要将 prevState.something 称为 something is your state。所以基本上你需要这样做：

this.setState(
      (prevState) => ({
        count: prevState.count + 1
      }),
      () => {
        console.log(this.state.count + " count");
      }
    );

这里是 POC：

import React from "react";
import "./styles.css";

class Test extends React.Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState(
      (prevState) => ({
        count: prevState.count + 1
      }),
      () => {
        console.log(this.state.count + " count");
      }
    );
  };

  render() {
    return (
      <>
        {this.state.count}
        <button onClick={this.handleClick}>Click </button>
      </>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Test />
    </div>
  );
}

这里是演示：https://codesandbox.io/s/serene-beaver-cu4bl?file=/src/App.js:0-596

【讨论】：

【解决方案3】：

应该是 prevState.count + 1

【讨论】：