首页 > 解决方案 > 当键相同时,React 输入在值更改后无法正确呈现

问题描述

https://codesandbox.io/embed/trusting-fire-bz5ti

这是一个显示问题的代码沙箱

在工作版本中,我使用 Math.random() 作为键

在不工作的版本中,我使用数组的索引作为键

当数组 this.state.values 更新时,它会重新呈现输入的集合,但是因为它们具有相同的键值,所以它似乎没有正确更新值。

您可以通过在出现的每个新输入中添加值 (a, b, c, d) 来尝试此操作,然后删除 b 或 c 以查看行为。

标签: javascriptreactjstypescript

解决方案


正如 Sung M. Kim 所说,基本上需要为数组的每个元素提供一致的键。我通过在对象输入对象中包含一个键值来做到这一点。

https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318


推荐阅读