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

Question

所以我注意到 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。我正在用另一个对象覆盖之前的对象。

例子

默认值和实际值： Fiddle: https://jsfiddle.net/69z2wepo/74509/

Answer 1

关于 defaultValue 属性的重要一点是它仅在安装时设置为输入元素。

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

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

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

Odd behaviour when re-rendering with defaultValue vs value

javascript

reactjs

react-jsx

jsx

例子