Question

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

我试图将钩子与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>
    );
}

为什么我的父页面不想重新渲染？预先感谢。

Answer 1

我已经创建了您要实现的目标的概念证明，并且可行：

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

您的代码中可能还有其他内容我们看不到，这阻止了组件重新呈现

Answer 2

父组件中的reload状态变量严格来说是局部变量；孩子看不见。

我已经使用React Hooks大约2个月了。有时学习曲线很陡峭，但是我现在真的很精通。

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

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

Answer 3

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

不过，一种常见用法是，setReload可以与某个事件相关联，例如。 onReload。您可以改为将道具onReload传递给孩子。

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

在onReload实现中，您可以调用setReload。

如何使用钩子从子组件中重新渲染父对象？

3 个答案: