useState 设置后恢复到初始状态？答案

【问题标题】：useState reverts back to initial state after being set?useState 设置后恢复到初始状态？
【发布时间】：2021-03-20 01:52:19
【问题描述】：

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

当灯箱中的信息发生更改时，它会将newOption 设置为该更改的值。当我在全局上下文中记录 newOption 时，我得到了 item 对象，就像我应该做的那样。但是，当我在stopEditOption 函数中记录newOption 时，它已恢复到null 的原始状态。我不确定为什么它不保留使用setNewOption 设置的值——是因为灯箱上下文吗？

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>
    </>;
}

【问题讨论】：

您是否尝试过使用 useCallback 钩子和依赖数组中的 newOption 定义您的 stopEditItem 函数？
@MauriceA。我有，不幸的是这并没有改变结果
您能否确保在执行 stopEditItem 函数之前将新值打印在日志语句中（即通过在 stopEditItem 函数中添加另一个日志语句

标签： javascript reactjs react-hooks use-state

【解决方案1】：

没关系，我通过将lightbox.setContent( 的内部以及状态管理移至外部函数来使其工作！

【讨论】：