时间戳

首页 > 解决方案 > 用 const 声明的函数使用 useState 的旧值

javascript - 用 const 声明的函数使用 useState 的旧值

问题描述

我有一个 React 组件（功能性），其中包含一个修改父组件状态的子组件。我为此使用了钩子useState。

状态更改后，父组件中有一个“下一步”按钮，该按钮执行引用更新状态的功能。问题是下一个函数使用状态被子组件修改之前的旧状态。

我不能在这里使用useEffect因为该功能需要在单击“下一步”按钮时执行，而不是在状态更改后立即执行。我对JavaScript 闭包做了一些挖掘，但没有一个答案能解决我的具体情况。

这是代码

const ParentComponent = () => {

    const [myState, setMyState] = useState(0);

    const handleNext = () => {

        console.log(myState);      // prints 0 which is the old value
    }

    return (

        <ChildComponent modifyState = {setMyState} />

        <Button onClick={handleNext} > Next </Button>

        )
    }
    
export default ParentComponent;

顺便说一句，没有错误。

标签： javascriptreactjsclosuresuse-statereact-functional-component

解决方案

try to modify like this

<ChildComponent modifyState={(value) => setMyState(value)} />

推荐阅读