如何使用 SPFx 中的 React 挂钩从孙组件强制刷新 GrandParent 组件答案

【问题标题】：How to force refresh of GrandParent component from grandchild component with React hooks in SPFx如何使用 SPFx 中的 React 挂钩从孙组件强制刷新 GrandParent 组件
【发布时间】：2020-06-01 04:39:01
【问题描述】：

在 SPFx Web 部件的主要组件中，我有一个在 React.useEffect 中运行的数据加载

const [jobsGets, setJobsGets] = React.useState(0);

React.useEffect(() => {
   {Some code to get data from SharePoint}
    });
  }, [jobsGets]);

所以当“jobsGets”的值发生变化时会发生刷新，对吧？

此组件调用另一个组件，该组件调用另一个组件，最后一个组件有一个应该通过更改“jobsGets”来刷新的事件。如果我写一个 fanction 并将其传递给每一代组件的 props，

它永远在主组件中运行。所以这不是一个好的解决方案。我如何从孙子组件中setJobsGets(jobsGets+1);？

欢迎任何提示。谢谢

【问题讨论】：

标签： reactjs react-hooks spfx

【解决方案1】：

您可能正在使用useEffect 更新grandChild 的作业，该作业在装载和每次更新时都会运行。如果您传递第二个空数组 [] 参数，则此更新将仅在您的特定情况下首次渲染后运行，避免重新触发：

// at some granchild
useEffect(() => { ...logic here }, [])

如果 useEffect 应该在特定参数的更新后运行，则将该参数作为参数传递给数组。 useEffect 将仅在 [] 上设置的参数依赖项发生更改时运行。

useEffect(() => { ...logic here }, [param])

您还可以查看useContext 以更好地在深度树上传递状态。

【讨论】：