如何使用一个自定义钩子 React 在两个远程组件之间共享数据

Question

我有两个组件，它们位于层次结构中的不同位置。一个组件具有应在另一组件中使用的数据。我试图通过自定义钩子来实现这一点。当我在组件中使用时，我得到了 false，我希望它为 true，因为我从组件 1 将其设置为 true，因此组件 2 应该为 true。我不知道对自定义挂钩有点困惑。

定制挂钩

export const useShareData = () => {
  const [data, setData] = useState<boolean>(false)

  const setValue = (value: boolean) => {
    setData(value)
  }
  return [data, setValue]
}

组件1

const [data, setData] = useShareData()
const dataToBeShared = true
useEffect(()=>{
   setData(dataToBeShared)
},[dataToBeShared])

组件2

const [data] = useShareData()
console.log(data)

在组件 2 中，该值始终为 false。

Answer 1

创建自定义挂钩不会共享数据，而只会共享代码。当组件 1 正在渲染时，如果它调用const [data, setData] = useState<boolean>(false)，它会为组件 1 创建一个状态变量。无论是内联编写还是提取到辅助函数（也称为自定义挂钩），都是这种情况。同样，当组件 2 调用 useState 时，它​​会为组件 2 创建状态。这两个状态不共享。

解决您的问题的标准方法是将状态提升到这两个组件的共同祖先的任何组件，然后将其传递下去。如果共同祖先在附近，可以使用道具；如果距离较远，上下文就会成为更有吸引力的选择。