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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数App（）{
const[testState，setTestState]=useState（“先前状态”）；
useffect（（）=>{
setGrid（）；
}, []);
常量setGrid=（）=>{
console.log（testState）；//输出：“上一个状态”
setTestState（“变更状态”）；
console.log（testState）；//输出：“以前的状态”，应为“已更改的状态”
}
返回(
{testState}
);
}
导出默认应用程序；

主要问题是

setTestState（）

异步处理更改。这就是为什么在第二个

console.log（）

中也有旧状态，因为它是同步运行的

要捕获状态更改，可以使用

useffect（）

hook

我建议如下使用：

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]);

建议改为：

---

我希望这有帮助

主要问题是

setTestState（）

异步处理更改。这就是为什么在第二个

console.log（）

中也有旧状态，因为它是同步运行的

要捕获状态更改，可以使用

useffect（）

hook

我建议如下使用：

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]);

建议改为：

我希望这有帮助

setTestState（）是一个异步方法。类似于setState（）方法。因此，您的第二个console.log（testState）在完全执行setTestState（）之前运行，因此您的console.log（testState）打印旧状态

如果要确保setTestState（）方法是否正常工作，可以对其使用useffect（），其工作原理与componentDidUpdate类似

useEffect( () => {
    console.log("updated state", testState)
}, [ 'testState' ]);

setTestState（）是一个异步方法。类似于setState（）方法。因此，您的第二个console.log（testState）在完全执行setTestState（）之前运行，因此您的console.log（testState）打印旧状态

如果要确保setTestState（）方法是否正常工作，可以对其使用useffect（），其工作原理与componentDidUpdate类似

useEffect( () => {
    console.log("updated state", testState)
}, [ 'testState' ]);