时间戳

首页 > 解决方案 > PrevState 在 React JS 中不会立即更新状态值

javascript - PrevState 在 React JS 中不会立即更新状态值

问题描述

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

   count: 0

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

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

标签： javascriptreactjssetstate

解决方案

如您所知 setState 是异步的。但也要了解如果你在 setstate 中传递回调，那么你需要调用prevState.somethingas 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

推荐阅读