react-native - 保持旧状态的组件？

Question

我有一个带有自定义按钮作为 Prop 的自定义模式。

const [selection,setSelection] = useState(null)

    const onSelect = (item) => {
      setSelection(item);
   
      Gui.PickOption({
          message: 'choose an action',
          buttons: BUTTONS,
          onPress,
      });
    }; 
BUTTONS = [{buttonText:'print selection', onPress:()=> console.log(selection)}]

这里的问题是，当用户按下按钮时，日志将为 NULL，因为模态似乎具有“选择”更新之前的状态。为什么不更新？如何让按钮跟上状态变化？ (请记住，上面的代码是我目前面临的一个问题的一个小例子)，本质上我希望 onPress 始终以最“当前”状态执行设置的“任务”。 )

Answer 1

问题是您在 setState 之后使用了选择值。我想您可以使用 useEffect 来监听选择值并在那里执行您的逻辑，例如:

const [selection, setSelection] = useState(null);
const onSelect = (item) => {
    setSelection(item);
};
useEffect(() => {
    Gui.PickOption({
        message: "choose an action",
        buttons: BUTTONS,
        onPress,
    });
}, [selection]);

当您设置一些状态(此处为 setSelections)时，您的组件将使用新值重新呈现，但在 onSelect 按钮的功能中您仍然使用旧值运行(直到下一次使用，即下一个渲染)。