reactjs - 防止本质上是动态的 TextField 自动填充

Question

我的表单中的文本字段是根据项目数组（这是一个状态变量）动态添加的，在填写文本字段后，单击“设置值”按钮，我将删除填充的文本字段。

在已删除的文本字段中输入的值正在自动填充到其连续的文本字段中，我找不到防止这种行为的方法。

请在此处找到示例

Answer 1

添加key到您的TextField. 就像是 -

<TextField key={Math.random()}> </TextField>

或者

<TextField key={item}> </TextField>它会解决你的问题。

Answer 2

发生这种情况是因为您使用索引作为键。
从反应文档：

如果项目的顺序可能发生变化，我们不建议对键使用索引。这会对性能产生负面影响，并可能导致组件状态出现问题。

这正是您的应用程序中正在发生的事情。
你可以参考这篇文章来阅读更多。
代替：

<Grid item key={index}>

您可以使用

<Grid item key={item}>

那是为了防止数组中的每个元素都是（并且将是）唯一的。
如果不是这种情况，您应该考虑其他键。