React钩子:从不同的.jsx文件更新useState钩子

Question

我有两个组件，每个组件都在自己的文件中，我真的想把它们分开，因为第二个组件是可重用的。然而，我需要能够更新"；"孩子"；来自"；"父"；组成部分我曾尝试将一个值作为道具传递，但这实际上不会将值设置回0。我甚至不确定它有什么作用。

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

下面是一个有同样问题的示例代码沙盒。

查看问题：

键入并选择"；蔬菜"；然后点击第二个选项卡；洋蓟"如果你再次点击搜索栏，然后选择"；水果"；，制表符值仍将为"0"；1〃；因此该组件将不显示任何内容，直到您手动点击"；草莓"；选项卡

你也会得到这个错误：

MUI:提供给Tabs组件的value无效。Tabs的子项中没有一个与"匹配；1〃；。您可以提供以下值之一：0。

Answer 1

我为您的问题找到了两种解决方案。

1. 我会将key标记添加到您的组件中，如下所示：

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

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

2. 更残酷-只需使用react hook-useEffect-我不建议这样做，但你可以在你的Food方法中添加这个钩子，并将依赖数组设置为selectedFood

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

这只是我脑海中很快想到的东西，如果我能想出更好的主意，我会分享的。

两种解决方案都将在每次selectedFood值更改时重新发送Food组件。

这是我的叉子，我希望它能解决问题。