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

Question

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

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
)
}