从外部调用 React setState hook (DOM/Google Maps)答案

【问题标题】：Calling React setState hook from outside react (DOM/Google Maps)从外部调用 React setState hook (DOM/Google Maps)
【发布时间】：2019-08-06 14:40:03
【问题描述】：

我正在构建一个函数 React 组件，它使用各种 useState() 钩子。它们中的每一个都提供了一个状态和一个可以调用来更新它的函数。这从内部反应本身就可以很好地工作。但在我的场景中，我还必须处理其他（DOM/Google Maps）环境。

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

你会想要使用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);

【讨论】：

【解决方案2】：

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

setState(state => !state);

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

【讨论】：