使用defaultValue与值重新渲染时的奇怪行为

Question

所以我注意到defaultValue时出现了一种非常奇怪的行为。当您使用defaultValue部分重新渲染时，它可能无法注册重新渲染并保持状态的初始渲染。

见图：

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

对于可能遇到此问题的其他人以及为何会出现这种情况的问题，这两者都是正面的。

生成此代码的代码行：

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

这最终得到map＆＃39;这样：

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

额外信息

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

实施例

defaultValue和值在行动中： 小提琴：https://jsfiddle.net/69z2wepo/74509/

Answer 1

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

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

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