PrevState不会立即更新React JS中的状态值

Question

我正在尝试使用prevState立即更新状态值，但值没有更改。我知道seState是ascnc函数，但如果我使用prevState，不应该立即更新吗？我在哪里犯的错？

count: 0

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

Answer 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语句在一个父函数结束后执行

Answer 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

Answer 3

它应该是prevState.count+1