“警告：”的简单解决方案：数组或迭代器中的每个子代都应具有唯一的“键”道具。

Question

I have a simple <Messages /> React component that shows the error/alert/success messages.

The code is simple as this:

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

The error Warning: Each child in an array or iterator should have a unique "key" occurs because I don't have a key in the <div /> . But my message doesn't have a field that I could call a "key". I thought to use message.text as key, but it's a little weird...

My idea is simple: create a count variable and use that as a key. As this:

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>;
}

Is there a problem in use this solution for this specific case ?

Answer 1

As pointed out by @azium in the comments, you could use index as the key:

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

For simple use this is fine. However, this means that each time the list is rendered, the first item has key=0, the second one has key=1 etc.

These keys are unique, but will lead to strange results if the message list changes . React uses the keys to track changes, and wants the same key to always identify the same record. React uses this to do efficient updating when one item in the list changes. If you add a message to the the list, or rearrange the order, react will produce really strange results. So the simple method above does not work when the list changes between renders .

In those cases, it is probably better (as also suggested by @azium in comments), to use a key that uniquely identifies the item (the index does not do this).

Probably something stored in the message itself, such as a unique ID :

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