Итерация через массив и рендеринг

Question

У меня есть простой компонент Movies.jsx и массив объектов внутри movieList.jsx Я экспортирую этот массив и устанавливая состояние внутри Movies.jsx равным этому массиву. Когда я смотрю в консоли, я вижу, что он прошел в состояние «ОК».

Я хочу итерации через этот массив объекта и визуализировать его: Как это сделать? Независимо от того, что я пытаюсь получить ошибку «Объекты недействительны в качестве ребенка-регента»

Прежде чем превратить его в массив, это был объект 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. Вам нужно установить уникальный ключ для каждого элемента, отображаемого в функции карты. Этот способ реагирования может различать их.