数组或迭代器中的每个子代都应具有唯一的“键”道具。

Question

I am getting error:

Warning: Each child in an array or iterator should have a unique "key" prop. Can someone please help me where i have to put key

Code for nav component:

var React = require('React');
var $ = require('jquery');

var Menubar = React.createClass({
    getInitialState: function() {
        return {
            items: []
        }
    },
    componentWillMount: function() {
        var _this = this;
        this.serverRequest =
        $.post("/nav", {}, function(result) {
           _this.setState({
                items: result.data
            });
        })
   },
    render: function() {
        var item = this.state.items.map(function(data) {
            var ico = "fa fa-" + data.ico;
            return (
               <div id={data.sname} className="nav_item">
                    <div className="nav_icon">
                          <a href={data.url}>
                               <i className = {ico}>
                               </i>
                          </a>
                    </div>
               </div>   
        );
    });
    return (
        <div>{item}</div>
    )
  }
})
module.exports = Menubar;

Answer 1

In react whenever you use a map function that returns JSX, each returned elements should have a key attribute in order for react to render optimally. You can read more here: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

You need to stick a key attribute in this line, usually I use the map index, but if each element has it's own unique id, you can use that instead

<div id={data.sname} className="nav_item" key={index}>

Here is the corrected code. (note that the comment needs to be removed as you can't use comments like that in actual JSX)

  var item = this.state.items.map(function(data, index) { var ico = "fa fa-" + data.ico; return ( // ** this element needs a key property ** <div id={data.sname} className="nav_item" key={index}> <div className="nav_icon"> <a href={data.url}> <i className = {ico}> </i> </a> </div> </div> ); 

Hope this helps.

Answer 2

You should be aware that React uses a virtual DOM to see if there are any changes to be flushed to the browser. To do this it needs to know exactly which element it is so that it can compare it next time the DOM changes as a result of state/prop change. This way react assigns id to each DOM element and compares the DOM for changes.

The reason you are shown this warning is that, when there is a set of DOM elements dynamically generated(in your case via a loop), you are required to tell react in someway so that it can recognize it back when it re-renders your DOM.

So the key attribute on the root element is required. Its a default practice to use index of the array for this, but i suggest you not to use this( read here ). I suggest you use data.sname in your case as i find it to be unique as you are assigning it to id .

Your change would be something similar to this

// ..other pieces of code
return (
           <div id={data.sname} key={data.sname} className="nav_item">
// ..other pieces of code

Answer 3

You should specify a unique key for your element. React is checking the key to identify and compare your element to determine if it needs to be re-rendered when a state change has been triggered in your tree.

Using the index of an item as key is not a best practice, because if the list is modified then your node would not longer match the right element in the list and could produce unexpected results.

If you are iterating over objects a good practice would be to use a property value as a key eg mapping users and use user.id as your unique key.

Answer 4

You should add a key to each child as well as each element inside children.

This way React can handle the minimal DOM change.

render: function() {
    var item = this.state.items.map(function(data, index) {
        var ico = "fa fa-" + data.ico;
        return (
           <div key={index} id={data.sname} className="nav_item">
                <div className="nav_icon">
                      <a href={data.url}>
                           <i className = {ico}>
                           </i>
                      </a>
                </div>
           </div>   
    );
});
return (
    <div>{item}</div>
)
}