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

Question

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

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

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

React Async example with useState not working as expected, what is the problem?

state

asynchronous

function

callback

reactjs