Question

我有一个简单的<Messages /> React组件，显示错误/警告/成功消息。

代码很简单：

render: function () {
            return <div>{this.state.messages.map(function (message) {
                return (<div className={message.type}>{message.text}</div>);
            })}</div>;
        }

出现错误Warning: Each child in an array or iterator should have a unique "key"，因为<div />中没有密钥。但是我的message没有一个可以称之为“密钥”的字段。我想用message.text作为关键，但这有点奇怪......

我的想法很简单：创建一个count变量并将其用作关键字。就这样：

render: function () {
    var count = 0;
    return <div>{this.state.messages.map(function (message) {
        var keyValue = count++;
        return (<div key={keyValue} className={message.type}>{message.type}</div>);
    })}</div>;
}

使用此解决方案是否存在此特定情况的问题？

Answer 1

正如@azium在评论中所指出的，你可以使用索引作为关键：

return <div>{this.state.messages.map(function (message, index) {
  return (<div key={index} className={message.type}>{message.text}</div>);
})}</div>;

为了简单使用，这很好。但是，这意味着每次呈现列表时，第一项都有key = 0，第二项有key = 1等。

这些密钥是唯一的，但如果邮件列表更改 将导致奇怪的结果 。 React使用密钥来跟踪更改，并希望相同的密钥始终标识相同的记录。当列表中的一个项发生更改时，React使用它来进行有效更新。如果您向列表添加消息，或重新排列顺序，则反应将产生非常奇怪的结果。因此，当列表在渲染之间发生变化时，上面的简单方法不起作用。

在这些情况下，使用唯一标识项目的键（索引执行不执行此操作）可能更好（正如@azium在评论中所建议的那样）。

可能存储在邮件本身中的内容，例如唯一的ID：

return <div>{this.state.messages.map(function (message) {
  return (<div key={message.ID} className={message.type}>{message.text}</div>);
})}</div>;

“警告：数组或迭代器中的每个子节点都应该有一个唯一的”关键“道具。”？

1 个答案: