Question

这个组件是一个空的项目槽，点击时呈现一个灯箱——灯箱允许编辑一个项目，然后，当关闭时，应该用新创建的项目填充槽。

当灯箱中的信息发生更改时，它会将 newOption 设置为该更改的值。当我在全局上下文中记录 newOption 时，我得到了 item 对象，就像我应该的那样。但是，当我在 newOption 函数中记录 stopEditOption 时，它已恢复到其原始状态 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>
    </>;
}

Answer 1

没关系，我是通过将 lightbox.setContent( 的内部以及状态管理移到外部函数来实现它的！

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

1 个答案: