【问题标题】：Odd behaviour when re-rendering with defaultValue vs value使用 defaultValue vs value 重新渲染时的奇怪行为
【发布时间】：2017-03-24 12:44:31
【问题描述】：

所以我注意到defaultValue 有一个非常奇怪的行为。当您使用defaultValue 重新渲染时，它的一部分可能不会注册重新渲染并保持初始渲染状态。

见图片：

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

这既是对可能遇到此问题的其他人的提醒，也是一个关于为什么会发生这种情况的问题。

生成这个的代码行：

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

这最终得到map'd like this：

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

额外信息

所以导致重新渲染的是setState。我正在用另一个对象覆盖以前的对象。

示例

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

【问题讨论】：

我的猜测是这可能与您更改项目列表时碰撞您的key 道具有关。不建议使用数组索引作为键。尝试将其替换为任何独特的东西。
@AlexM 嗯，似乎并非如此。无论如何，密钥的实际用途是什么？没有它们它们似乎也能正常工作，我只是添加它们，因为如果我不添加它们，控制台会发出一点嘶嘶声
我检查了你的例子。实际上，情况就是这样。几分钟后我会给你一个解释。
这里是一个带有唯一 key 属性的示例：jsfiddle.net/b9qy7o3x 请注意，键现在不仅包含索引，还包含对象 ID，这使得它是唯一的。我会尽快发布更详细的答案
@AlexM 这很有趣。为什么像"something"+index 这样简单的东西不起作用？我更新了小提琴以显示 defaultValue 和正常值

标签： javascript reactjs react-jsx jsx

【解决方案1】：

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

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

要解决这个问题，你需要强制 React 重新挂载 <input> 而不是更新它们。可以通过确保在切换列表时 key 属性发生变化来完成。我更新了您的示例 (https://jsfiddle.net/b9qy7o3x/)，以便它将列表的 ID 添加到 key 属性中，使其始终唯一。

【讨论】：