控制台日志显示旧值，即使在 JS 中的 .then 方法内更新后也是如此

Question

我是 React 和 JS 的新手。所以场景如下。我有一个如下所示的功能组件。

const testComponent = () =>{
    const [myState, setMyState] = useState('INITIAL_VALUE')

    const updateState = async () => {
        setMyState("UPDATED_VALUE")
        console.log('updated using hook')
        console.log(myState)

    }

    useEffect(() => {
        updateState().then(
            () => console.log(myState)
        )
    })

    return(
        <div>
            <h1>
                {myState}
            </h1>
        </div>
    )
}

上面的所有console.log记录“INITIAL_VALUE”，虽然它们都是在更新状态变量后调用的！我期待它是“UPDATED_VALUE”，因为它在 HTML dom 中呈现！为什么我仍然得到旧值？

它不应该记录更新后的值，因为它是在 .then() 方法中的 promise 之后执行的吗？据我所知，一旦承诺得到解决，就会执行 .then() 方法。但这看起来很奇怪！有错请指正！

Answer 1

当 updateState() 解决时，myState 变量被更新。
但它的新值在下一次渲染时只会是 displayed/logged。

Answer 2

首先你不需要使用异步函数来改变你的状态。

 const testComponent = () =>{
    const [myState, setMyState] = useState('INITIAL_VALUE')

    const updateState = useCallback((value) => {
        setMyState(value);
        console.log('updated using hook')
        console.log(myState)
    }, []);

    useEffect(() => {
      updateState("UPDATED_VALUE");
    }, [])

    console.log(myState); *// would show always the most actual data stored in your **myState** after useEffect finished*

    return(
        <div>
            <h1>
                {myState}
            </h1>
        </div>
    )
}

Answer 3

如果您想在 useEffect 中使用 myState，您需要将它添加到您的依赖项数组中。

这个：

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

应该会显示正确的结果。

请记住在单独的 useEffect 调用中执行此操作，但是：如果您在依赖项数组中具有 myState 的同一 useEffect 块中调用 updateState，你会陷入一种无限循环。

文档中的更多信息：

If you pass an empty array ([]), the props and state inside the effect will always have their initial values.

（来自 https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects）

控制台日志显示旧值，即使在 JS 中的 .then 方法内更新后也是如此

console log shows old value even after updating it inside .then method in JS

javascript

node.js

reactjs

es6-promise

react-hooks