javascript - 使用defaultValue vs value重新渲染时的奇怪行为

因此，我注意到defaultValue的行为很奇怪。当使用defaultValue进行重新渲染时，它的某些部分可能无法注册重新渲染并保持状态的初始渲染。

参见图片：

但是，从defaultValue切换到value可以解决此问题。

这既要引起其他可能遇到此问题的人的注意，又要问为什么会发生此问题。

生成此代码的代码行：

      inner_array.push(
        <div key={j}>
          <input defaultValue={final_line} style={{ width: "100%" }} onClick={this.highlight} ></input>
        </div>)

最终得到map这样的信息：

{Object.keys(data).map( (item, index) => (!item.match(/default/i)) ? <li key={index}>{item}</li> : "")}

额外的信息

因此，导致重新渲染的是setState。我用另一个对象覆盖了先前的对象。

例

defaultValue和实际值：
小提琴：https://jsfiddle.net/69z2wepo/74509/

最佳答案

defaultValue属性的重要之处在于，它仅在安装时设置为输入元素。

在您的示例中，您有两个元素列表，并且使用数组索引作为键。当您切换来源清单（阵列或物件，没关系的话，只要您最终将其映射到元素阵列），
您的某些键保持不变（索引0和1），因此React只会更新这些元素，而不是卸载它们并装入新元素。并且，如您所知，defaultValue仅在安装元素时设置一次。因此，当组件更新时，对defaultValue的更改不会生效。

要解决此问题，您需要强制React重新安装<input>而不是对其进行更新。可以通过在切换列表时确保key道具更改来完成。
我更新了您的示例（https://jsfiddle.net/b9qy7o3x/），以便将列表的ID添加到key道具，使其始终唯一。

关于javascript - 使用defaultValue vs value重新渲染时的奇怪行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42990777/