配列を繰り返してレンダリングする

Question

movieList.jsx内に単純なコンポーネントMovies.jsxとオブジェクトの配列があります。この配列を書き出し、Movies.jsx内の状態をその配列と同じに設定しています。私がコンソールを見ると、私はそれが状態okに渡されたことがわかります。

オブジェクトの配列を繰り返してレンダリングし、レンダリングします：それはどのようにするのですか？ 私は何をしようとするとエラー "オブジェクトは反応の子として有効ではありません"

私はそれをjsonオブジェクトでしたが、私はそれを見ていませんでした。

私はまた、実施例2

の「アレイまたはイテレータ内の各子供がユニークな 『キー』は小道具持っている必要があります」というエラーを取得しています： それはどのようになります配列の代わりにJSONオブジェクトだった場合。私たちはまた、それを別個のコンポーネントからエクスポートし、それから必要とするでしょうか？どのようにそれを繰り返しますか？

Answer 1

ここでは、達成しようとしているものの簡単な例を示します。あなたがスクリーンショットを提供して以来、私はメークシフトデータを提供しなければならなかった。

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

チェックアウトリアクトドキュメント - https://facebook.github.io/react/docs/lists-and-keys.html#keysとhttps://facebook.github.io/react/docs/lists-and-keys.html#embedding-map-in-jsx。マップ機能でレンダリングされた各アイテムに固有のキーを設定する必要があります。このように反応すると反応が区別されます。