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

У меня возникли проблемы с тем, что 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() в верхней части его метода рендеринга, похоже, не срабатывает.

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


reactjs javascript
person user1381745    schedule 22.04.2016    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вместо использования 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>
)
person Dan Prince    schedule 22.04.2016
comment
Raaaaage — раньше я использовал map(), но не использовал ключевое слово return. Это всегда простые вещи :( Большое спасибо. - person user1381745; 22.04.2016