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

Question

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

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

这里有一个例子 code sandbox 也有同样的问题。

查看问题：

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

你也会得到这个错误：

MUI: The value provided to the Tabs component is invalid. None of the Tabs' children match with "1". You can provide one of the following values: 0.

Answer 1

我看到了两个解决你的问题的方法。

我会向您的组件添加 key 标签，如下所示：

    <Food key={selectedFood} desiredFood={selectedFood} val={0} />

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

更残酷 - 只需使用反应钩子 - useEffect - 我不推荐它但你可以在你的 Food 方法中添加这个钩子并将依赖数组设置为 selectedFood
```
  useEffect(() => {
     console.log("render");
     setValue(0);
   }, [props.desiredFood]);
```

这只是我突然想到的事情，如果我想到更好的主意，我会分享它。

两种解决方案都会在每次 selectedFood val 更改时重新呈现 Food 组件。

Here 是我希望的工作解决方案的分支。

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

React Hooks: Update useState hook from a different .jsx file?

reactjs

material-ui

use-state