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

Question

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

灯箱中的信息发生更改时，会将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>
</>;
}

Answer 1

Nevermind，我通过将lightbox.setContent(的内部以及状态管理移动到外部功能来实现它！