第一次单击时反应useState不更新[重复]答案

【问题标题】：React useState not updating on first click [duplicate]第一次单击时反应useState不更新[重复]
【发布时间】：2021-07-11 17:31:14
【问题描述】：

为什么第一次点击时状态不改变？

const [building, setBuilding] = useState(0);

<Button 
     title="tester"
          onPress={() => {
            setBuilding(1);
            console.log(Building);
          }}/>

控制台日志在第一次点击时总是返回“0”，而不是预期的“1”。我该如何解决这个问题？

【问题讨论】：

状态更新是异步的。
就像 Dave Newton 所说，状态更新不会立即反映在 on Press 功能中。如果你想在 useEffect 中查看状态更新控制台日志
另外，请参阅this、this、this、this、this。
回答了这个问题，谢谢。一个人通常会关闭问题还是留给其他人？我觉得我的问题比它显示的链接更容易理解。

标签： reactjs react-native state use-state

【解决方案1】：

由于状态更新是异步的，您可能会通过将 building 添加到 useEffect 依赖项来查看您的状态值更新，从而使其在 building 的值更改时触发。

const [building, setBuilding] = useState(0);

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

  return (
    <button
      title="tester"
      onClick={() => {
        setBuilding(1);
      }}
    >
      test
    </button>
  );

【讨论】：

我明白了。然后从技术上讲，我需要 setBuilding(1) 在 useEffect 中“实际”更改它。对吗？
我只问是因为目标是在第一次单击时实际更改它，而不仅仅是查看控制台日志更改。取决于我把它放在哪里。您的解决方案会在首次点击时更改构建吗？
不，点击处理程序会更新状态。它在您的按下功能中不容易使用的唯一原因是设置状态是异步的。如果你在 jsx 中显示建筑价值，你会看到它的价值更新正确。使用 useEffect 的唯一原因是，如果您需要在渲染之前对建筑价值做一些事情
附件是一个代码沙箱，向您展示我的意思codesandbox.io/s/mystifying-wind-qt18k?file=/src/App.js:0-388
所以用lamens术语来说，useEffect只会在加载时将“0”排除在外，所以当我第一次点击它时，它会显示正确的数字。