使用 useState 的 React Async 示例未按预期工作，有什么问题？

Question

React 对我来说是超级新的，并且学习了一些异步概念。目前，有我注释掉的工作代码。您可以看到工作代码采用useState(0)。 0 作为值，而没有工作的 useState 接受一个对象，useState({ counter: 0})。为什么它给我一个错误并输出 [object Object]1 和 NaN 而不是 number 预期的数字输出？

import React, { useState } from 'react'

const Async = () => {
    const [currentState, setState] = useState({
        counter: 0
    });

// Can we have prevCounter as an argument? 
// *The two methods below are incorrect!*

const increase = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter + 1
        })
        ), 500
    );
} // will output [object Object]1

const decrease = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter - 1
        })
        ), 500
    )
} // will output NaN

// This portion works fine. Above does not.
/* const [currentState, setState] = useState(0);

const increase = () => {
    setTimeout(
        () => setState(prevCounter => prevCounter + 1)
        , 500
    );
}

const decrease = () => {
    setTimeout(
        () => setState(prevCounter => prevCounter - 1)
        , 500
    );
} */

return(
    <div>
        <h1>{currentState.counter}</h1>  
        {console.log(currentState.counter)}
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
    </div>  
  );
}

export default Async;

Answer 1

需要正确访问状态对象counter 属性currentState.counter，或者在本例中为prevCounter.counter，因为这是您在功能状态更新中命名的先前状态对象。

prevCounter 是一个对象，因此当您对其应用算术运算时，结果应该是预期的NaN。

const increase = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter.counter + 1
        })
        ), 500
    );
} // will output [object Object]1

const decrease = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter.counter - 1
        })
        ), 500
    )
}