如何在同一个函数中更改和访问 reactjs 状态？答案

【问题标题】：How to change and access reactjs state in a same function?如何在同一个函数中更改和访问 reactjs 状态？
【发布时间】：2022-11-21 18:52:11
【问题描述】：

我对 reactjs 有点陌生，我遇到了一种情况，我必须更改状态，然后我需要在同一个函数中访问新的状态值。请看下面的代码，

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState(true); // default state true

  const CallMe = () => {
    setState(false); // state change to false
    console.log(state); // expecting false but return true
  };

  return (
    <div className="App">
      <button onClick={CallMe}>CallMe</button>
    </div>
  );
}

当我第一次点击按钮时，当我期待 false 时，我得到了 true。无论如何，我可以用与上面相同的功能来做这些事情吗？

【问题讨论】：

如果你马上需要一个状态，你通常不使用状态而是使用变量。让常量

标签： reactjs react-hooks state

【解决方案1】：

state 是异步的。你需要等到状态更新。使用useEffect

useEffect(() => {
    console.log(state)
}, [state])

【讨论】：

没有办法，我在CallMe函数里面可以吗？
使用 setState 中的第二个参数。 setState(false, () => console.log(state))
不工作，显示错误：警告：来自 useState() 和 useReducer() 挂钩的状态更新不支持第二个回调参数。要在渲染后执行副作用，请使用 useEffect() 在组件主体中声明它。

【解决方案2】：

React 状态是异步的，所以在下面的代码行中状态还没有改变：

console.log(state);

您应该使用useEffect 来查看更改：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState(true); // default state true

  useEffect(() => {
    console.log(state)
  }, [state])

  const CallMe = () => {
    setState(false); 
  };

  return (
    <div className="App">
      <button onClick={CallMe}>CallMe</button>
    </div>
  );
}

【讨论】：