javascript - 使用 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。我正在用另一个对象覆盖以前的对象。

示例

defaultValue 和实际值: fiddle :https://jsfiddle.net/69z2wepo/74509/

Answer 1

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

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

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