如何使用钩子从子组件重新渲染父组件？答案

【问题标题】：How to re-render a parent from a children component with hook?如何使用钩子从子组件重新渲染父组件？
【发布时间】：2019-10-09 00:41:15
【问题描述】：

当我单击子组件中的按钮时，我想强制我的父级重新呈现页面。（我不使用redux，因为我在我的项目中没有时间学习它，所以我使用localStorage。不幸的是React看不到什么时候对本地Storage进行了更改，所以他没有重新渲染. 这就是为什么我想强制它重新渲染我的页面（以获得正确的内容）。）

我尝试使用带有函数 useState 的钩子来执行此操作，但它不起作用，我不知道为什么... （我的页面没有任何变化）

这是我的父页面：（只是代码很重要）

const[reload, setReload] = useState(false);
...
else if (user) { contents = [<Message_UserIdentified user={user} callBack={setReload}/>, contentform]; }

这是我的子组件：

const Message_UserIdentified = (props) => {
    let user = props.user;
    return (
        <Alert color="primary" className="alert alert-dismissible alert-info">
            <h4>Welcome {!user ? "" : user.firstname} {!user ? "" : user.lastname}</h4>
            If you are not {!user  ? "" : user.firstname} click <a onClick={() => {localStorage.removeItem('idUser'); props.callBack(true);}}>here.</a>
        </Alert>
    );
}

为什么我的父页面不想重新渲染？提前致谢。

【问题讨论】：

避免使用 localStorage 来推动应用程序的更改。让你的 React 状态成为“真相的来源”，当你的状态改变时，将它们保存到 localStorage。您会发现 useEffect 对保存到 localStorage 很有用。

标签： reactjs

【解决方案1】：

我已经创建了一个概念证明，说明您正在尝试实现的目标并且它有效：

https://codesandbox.io/s/weathered-smoke-ojr5j

您的代码中可能还有其他我们看不到的东西阻止了组件重新渲染

【讨论】：

【解决方案2】：

父组件中的reload 状态变量是严格本地的；孩子看不到。

我已经使用 React Hooks 大约 2 个月了。学习曲线有时很陡峭，但我现在已经非常熟练了。

称为 Context API 的 Hooks 配套技术非常适合您的需求。这是您应该使用的而不是本地存储，因为两个组件都可以访问它。您的子组件将在 Context 中将 reload 的等效项设置为 true，而您的父组件将拥有一个 useEffect 函数，该函数将 reload 作为依赖项。因此，当 reload 从 false 更改为 true 时，父级中的 useEffect 函数将被触发并运行您想要的代码。

在早期，我从这个视频系列中受益匪浅：https://www.youtube.com/watch?v=6RhOzQciVwI&t=46s 观看前几个视频，您应该会很快了解如何在功能性 React 组件中实现 Context API。

【讨论】：

感谢这个建议，我不知道 Context :)

【解决方案3】：

您的子组件可以有一个直接将setReload 传递给它的道具。

然而，一种常见的用法是，setReload 可以与事件相关联，例如。 onReload。您可以将道具 onReload 传递给孩子。

  <Child onReload={() => { setReload() }} />

在onReload实现内部，你可以调用setReload。

【讨论】：