时间戳

首页 > 解决方案 > React Hooks：从不同的 .jsx 文件更新 useState 挂钩？

reactjs - React Hooks：从不同的 .jsx 文件更新 useState 挂钩？

问题描述

我有两个组件，每个组件都在自己的文件中，我真的很想将它们分开，因为第二个组件是可重复使用的。但是，我需要能够从“父”组件更新“子”组件中的钩子之一。我尝试过将一个值作为道具传递，但这实际上不会将该值设置回 0。我什至不确定它会做什么。

更具体地说，我在子组件中使用 Material UI Tabs 组件，并希望通过使用父组件中的道具来更新 Tabpanel 的“值”。

这是一个具有相同问题的示例代码沙箱。

要查看问题：

键入并选择“蔬菜”，然后单击第二个选项卡“朝鲜蓟”。如果再次单击搜索栏，然后选择“水果”，选项卡值仍为“1”，因此组件将不显示任何内容，直到您手动单击“草莓”选项卡。

您还会收到此错误：

MUI：value提供给 Tabs 组件的内容无效。选项卡的子项都没有与“1”匹配。您可以提供以下值之一：0。

标签： reactjsmaterial-uiuse-state

解决方案

我看到您的问题有两种解决方案。

  1. 我会key为您的组件添加标签，如下所示：
    <Food key={selectedFood} desiredFood={selectedFood} val={0} />

它将在更改Food时使用新的道具重新渲染您的组件。selectedFood

  1. 更残酷 - 只需使用反应钩子 - useEffect - 我不推荐它，但你可以在你的 Food 方法中添加这个钩子并将依赖数组设置为selectedFood

      useEffect(() => {
     console.log("render");
     setValue(0);
   }, [props.desiredFood]);

这只是我脑海中浮现的一些东西，如果我想出更好的主意，我会分享它。

Food两种解决方案都会在每次selectedFoodval 更改时重新渲染组件。

这是我希望的工作解决方案的叉子。

推荐阅读