Javascript useState在设置后恢复到初始状态？

此组件是一个空的项目槽，单击时呈现一个lightbox——lightbox允许编辑项目，然后在关闭时，应使用新创建的项目填充该槽

当灯箱中的信息更改时，它将

newOption

设置为该更改的值。当我在全局上下文中记录

newOption

时，我得到了item对象，就像我应该得到的那样。但是，当我在

stopEditOption

函数中记录

newOption

时，它已恢复到其原始状态

null

。我不确定它为什么不保留用

setNewOption

设置的值——是因为lightbox上下文吗

export default function PollOptionSlot(props) {
    const {children, onAddOption} = props;
    const lightbox = useContext(LightboxContext);
    const [newOption, setNewOption] = useState(null);

    console.log(newOption);  // this works and logs the newOption as the newly created item, before closing the lightbox

    function stopEditItem() {
        onAddOption(newOption); // this logs as null
        lightbox.setContent(null);
    }

    function openEditor() {
        lightbox.setContent(<div className={Style.itemEditor}><ItemEditor onChange={setNewOption}
                                                                          onSaveButtonClick={stopEditItem}/></div>);
    }

    return <>
        <div className={Style.main} onClick={openEditor}>
            {children}
        </div>
    </>;
}

导出默认函数PollOptionSlot（props）{
const{children，onAddOption}=props；
常量lightbox=useContext（LightboxContext）；
const[newOption，setNewOption]=useState（null）；
console.log（newOption）；//在关闭lightbox之前，该操作将newOption作为新创建的项进行记录
函数stopEditItem（）{
onAddOption（newOption）；//此日志记录为null
lightbox.setContent（null）；
}
函数openEditor（）{
setContent（）；
}
返回
{儿童}
;
}

没关系，我是通过移动

lightbox.setContent的内部来实现的（

以及外部函数的状态管理！

您是否尝试过在依赖项数组中使用带有

newOption

的useCallback钩子来定义

stopEditItem

函数？@MauriceA。很遗憾，这并没有改变结果。您可以确保在执行stopEditItem函数（即，通过在stopEditItem函数中添加另一个日志语句）