Reagieren/JSX Fehler: Jede Verwendung eines Schlüssel Objekt sollte

Question

Der gesamte Fehler in React.addons gewickelt werden:

"Warning: Each child in an array or iterator should have a unique \"key\" prop. Check the render method of RenderArray"

Der Code:

/* jshint esnext: true */ 

class RenderArray extends React.Component { 

    constructor() { 
    super(); 
    this.state = {myArray : ""}; 
    } 

    componentDidMount() { 
    console.log(this.state.myArray); 
    } 

    componentWillMount() { 
    this.setState({ 
     myArray: ['one', 'two', 'three', 'four', 'five'] 
    }); 
    } 


    render() { 

    showEl = this.state.myArray.map(function(i) { 
     return <li>{i}</li>; 
    }) 


    return (
     <div className="jumbotron container"> 
      <ul> 
      {showEl} 
      </ul> 
     </div> 
    ); 
    } 
}; 

Verbesserungsvorschläge?

Answer 1

Hoffnung, diese

showEl = this.state.myArray.map(function(i) { 
    return <li key={i}>{i}</li>; 
}) 

auch helfen wird, prüfen Sie diesen Link https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 2

Für jedes Element wiederholt, reagieren, um einen eindeutigen Schlüssel will. Also in Ihrem Fall, so etwas wie:

showEl = this.state.myArray.map(function(i) { 
    return <li key={i}>{i}</li>; 
}) 

Answer 3

Es ist kein Fehler, dann ist es eine Warnung, und es sagt dir genau das, was zu tun ist. Fügen Sie eine key Stütze auf dem Kind Ihres Arrays hinzu.

showEl = this.state.myArray.map(function(i) { 
    return <li key={i}>{i}</li>; 
}) 

Lesen Sie über reconciliation, wenn Sie die Chance bekommen.