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

【问题标题】：How to share data between two remote components with one custom hook react如何使用一个自定义钩子在两个远程组件之间共享数据
【发布时间】：2021-03-18 23:25:27
【问题描述】：

我有两个组件位于层次结构中的不同位置。一个组件具有应该在另一个组件中使用的数据。我试图用自定义钩子来实现这一点。当我在组件中使用时，我得到了错误，我希望它为真，因为我从组件 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。

【问题讨论】：

尝试使用上下文
不能使用上下文，因为它们之间有很多组件不想使用它，我正在尝试使用自定义钩子来实现
我认为只有三种方式最常用，像redux一样提升状态，上下文和外部包，检查这个stackoverflow.com/questions/53451584/…或者你可以使用useGlobalState github.com/dai-shi/react-hooks-global-state，试试吧
Cannot use context because there are many components between them don't want to use it 我不明白。这正是 context 的好处：跳过不想使用它的中间组件。

标签： reactjs react-hooks

【解决方案1】：

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

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

【讨论】：