从外部react（DOM / Google Maps）调用React setState挂钩

Question

我正在构建一个使用各种useState()钩子的功能React组件。它们每个都提供一个状态和一个可以调用以更新它的功能。从自身内部可以很好地工作。但是在我的情况下，我也必须处理其他（DOM / Google地图）环境。

作为来自Google地图上DOM元素的回调，我想调用setState(!state)来翻转布尔值。但是，此操作仅一次。

我认为问题在于setState挂钩无法获取最新状态，而是使用初始状态。翻转bool 1会将其反转，但是在不考虑先前更改的情况下再次翻转它不会更新任何内容。

我设法通过实现一种在DOM中的数据属性上设置布尔值的状态（然后翻转该布尔值）来解决此问题，但是我认为这是一个非常丑陋的解决方案。

我该如何从非React提供的回调函数中更新功能React组件中的状态？

Answer 1

如果问题是setState使用了错误的状态，则可以将函数传递给setState：

setState(state => !state);

这将使用最新状态，而不是React渲染时发生的状态。不确定在这种奇怪的反应外情况下该如何处理，但可能会有所帮助。如果此页面甚至没有使用React（甚至没有呈现您要编辑状态的组件），那么HTML LocalStorage可能是保存信息的最佳选择。

Answer 2

您将要使用functional updates。

const [bool, setBool] = React.useState(false);

// Flip bool depending on latest state.
setBool((prevBool) => !prevBool);

与在组件本身中使用最新状态相反，后者可能根据备注/状态生命周期使用错误的状态：

const [bool, setBool] = React.useState(false);

// bool could be behind here. DON'T do this.
setBool(!bool);