Компонент в JSX не загружается?

Question

У меня возникли некоторые проблемы с React не отображается данных, относящихся к реквизиту отображения компонента:

import React from 'react'; 

import {ItemListing} from './ItemListing.js'; 

export var SearchResults = React.createClass({ 
    render: function() { 
     console.log('Render called! SearchResults props', this.props); // Fires and displays data as expected 
     return (
      <div> 
       {this.props.items.forEach(function(item) { 
        console.log(item); // Fires correctly 
        <ItemListing item={item} /> // Does not run - a console.log() inside the render method of this component does not fire 
       })} 
      </div> 
     ) 
    } 
}); 

Этот компонент загружен внутри своего родителя, как <SearchResults items={this.state.items} /> и console.log() внутри функции рендеринга выше делает показать реквизит загружается как ожидалось (после первоначальной загрузки как пустой, поскольку данные поступают из вызова Ajax далее вверх по потоку).

Однако компонент внутри цикла forEach не загружается, нет дисплея, а console.log() в верхней части его метода визуализации не срабатывает.

Я очень новичок в реагировании, поэтому может отсутствовать что-то очевидное, но может ли кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Вместо использования forEach вам необходимо использовать map.

Метод forEach предназначен для получения побочных эффектов и, следовательно, не возвращает значения (вернее, он возвращает undefined). Взгляните на литерал JSX после оценки forEach.

return (
    <div> 
    {undefined} 
    </div> 
) 

Вместо этого используйте map и вернуть дочерние компоненты.

return (
    <div> 
    {this.props.items.map(function(item) { 
     console.log(item); // Fires correctly 
     return <ItemListing item={item} />; 
    })} 
    </div> 
) 

После оценки, в буквальном смысле JSX будет выглядеть примерно так (в зависимости от того, сколько элементов в this.props.items):

return (
    <div> 
    {[ 
     <ItemListing item={this.props.items[0]} />, 
     <ItemListing item={this.props.items[1]} />, 
     // ... 
     <ItemListing item={this.props.items[n]} />, 
    ]} 
    </div> 
)