时间戳

首页 > 解决方案 > 更新函数后在函数中记录状态，仍然输出初始状态

javascript - 更新函数后在函数中记录状态，仍然输出初始状态

问题描述

在尝试从 React 中的函数调整状态时，我遇到了一些不寻常的事情。

一个简单的示例包括尝试更改testState包含字符串的状态。我认为我可以setTestState()在函数中使用来更改字符串并查看它的更改值。但是，我注意到console.log(testState)输出相同的状态，所以它似乎setTestState(...)没有做任何事情。但是，渲染状态使用更新后的字符串。

那么为什么console.log(tempState)显示原始状态而不是新状态呢？我一直无法找到答案。我使用的代码如下。任何建议都会很棒。

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {  
  const [testState, setTestState] = useState("previous state");

  useEffect(() => {
    setGrid();
  }, []);

  const setGrid = () => {
    console.log(testState);         // output: "previous state"
    setTestState("changed state");
    console.log(testState);         // output: "previous state", expected "changed state"
  }

  return (
    <div>      
      {testState}
    </div>
  );
}

export default App;

标签： javascriptreactjsreact-hooks

解决方案

主要问题是setTestState()异步处理更改。这就是为什么你在第二个console.log()中也有旧状态，因为它是同步运行的。

要捕获状态更改，您可以使用useEffect()钩子。

我建议使用如下：

const [testState, setTestState] = useState('previous state');

useEffect(() => {
   setGrid();
}, []);

const setGrid = () => {
   console.log('oldState', testState);

   setTestState('changed state');
};

useEffect(() => {
   console.log('newState', testState);

   // ... actions after state change
}, [testState]);

推荐阅读：使用效果挂钩

我希望这有帮助！

推荐阅读