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>)

额外信息

因此，导致重新渲染的是

setState

。我正在用另一个对象覆盖上一个对象

例子 默认值和实际值：

---

Fiddle:

有关

defaultValue

属性的重要一点是，它仅在装入时设置为输入元素

在您的示例中，有两个元素列表，并且使用数组索引作为键。当您切换源列表（数组或对象）时，其实并不重要，因为您最终会将其映射到一个元素数组， 您的一些键保持不变（索引

0

和

1

），因此只需更新这些元素，而不是卸载它们并装载新元素。而且，正如您所知，

defaultValue

仅在安装元素时设置一次。因此，对

defaultValue

的更改在组件更新时不会生效

要解决此问题，您需要强制React重新装载

，而不是更新它们。可以通过确保切换列表时

键

道具发生变化来完成。

---

我更新了您的示例（），以便它将列表的ID添加到

键

道具中，使其始终唯一。

我的猜测是，它可能与您更改项目列表时发生冲突的

键

道具有关。不建议将数组索引用作键。试着把它换成任何独一无二的东西。@AlexM，嗯，似乎不是这样。钥匙的实际用途是什么？如果没有它们，它们似乎可以正常工作，我只是添加了它们，因为如果我不检查您的示例，控制台会发出一点嘶嘶声。事实上，情况就是这样。几分钟后我会给你一个解释。下面是一个使用unique

key

prop的示例：请注意，键现在不仅包含索引，还包含对象ID，这使得它是唯一的。我会发布更详细的答案soon@AlexM那很有趣。为什么像

“something”+索引这样简单的东西不起作用？我已经更新了小提琴，以显示默认值和正常值
{Object.keys(data).map( (item, index) => (!item.match(/default/i)) ? <li key={index}>{item}</li> : "")}