Iterieren durch Array und Rendern

Question

Ich habe eine einfache Komponente Movies.jsx und Array von Objekten in movieList.jsx Ich bin dieses Array exportieren und den Status in Movies.jsx gleich diesem Array. Wenn ich in die Konsole schaue, sehe ich, dass es in den Zustand ok übergegangen ist.

Ich möchte dieses Array von Objekten durchlaufen und rendern: Wie mache ich das? Was auch immer ich versuche, bekomme ich einen Fehler "Objekte sind nicht gültig als React Kind"

Bevor ich es in Array verwandelte es war ein JSON-Objekt, aber ich habe auch nicht mit diesem aussehen.

ich auch einen Fehler bekommen, dass "Jedes Kind in einem Array oder Iterator soll einen eindeutigen 'Schlüssel' hat prop"

Beispiel 2: Wie wäre es, wenn es anstelle des Arrays ein JSON-Objekt war. Müssten wir es auch aus einer separaten Komponente exportieren und dann benötigen? Wie würden wir es durchspielen?

Answer 1

Hier ist ein kurzes Beispiel für das, was Sie erreichen möchten. Da Sie Screenshots zur Verfügung gestellt haben, musste ich Daten bereitstellen.

var Movies = { 
 
    "data": [{ 
 
     "id": 1, 
 
     "name": "Forest Gump", 
 
     "rating": 5 
 
    }, { 
 
     "id": 2, 
 
     "name": "Lion", 
 
     "rating": 5 
 
    }] 
 
}; 
 

 
var Movie = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div> 
 
      <div>Name: {this.props.item.name}</div> 
 
      <div>Rating: {this.props.item.rating}</div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var MovieContainer = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     movies: null 
 
    }; 
 
    }, 
 
    componentWillMount: function() { 
 
    this.setState({ 
 
     movies: Movies.data 
 
    }) 
 
    }, 
 
    render: function() { 
 
    return (
 
     <div> 
 
     { this.state.movies.map(function(item) { 
 
      return (
 
      <Movie key={item.id} item={ item } /> 
 
     ) 
 
     }) } 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
    
 
ReactDOM.render(
 
    <MovieContainer />, 
 
    document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 

 
<div id="container"></div>

Answer 2

Schauen Sie sich die Dokumentation Reagieren - https://facebook.github.io/react/docs/lists-and-keys.html#keys und https://facebook.github.io/react/docs/lists-and-keys.html#embedding-map-in-jsx. Sie müssen für jedes in der Kartenfunktion gerenderte Element einen eindeutigen Schlüssel festlegen. Auf diese Weise kann react sie unterscheiden.