Ошибка при попытке визуализации нескольких ReactElements путем сопоставления массива

Question

В настоящее время я ищу для рендеринга нескольких элементов внутри класса путем циклического прохождения массива, который был передан через реквизиты Владельца этого компонента. Вот пример:

render() { 
    return (
     <div style={this.styles.container}> 
      {this.props.matchup 
       ? this.renderMatchupWithTeams(this.props.matchup) 
       : this.renderDefaultMatchup()} 
     </div> 
    ) 
} 

, а затем ...

renderMatchupWithTeams(matchup) { 
    console.log('renderMatchupWithTeams', matchup); 
    return matchup.map(team => { 
     console.log(`team: ${team.name}, seed: ${team.seed}`); 
     return (
      <Team name="UCLA" 
         seed={matchup.seed}/> 
     ) 
    }); 
}; 

Бревна были включены, чтобы подчеркнуть тот факт, что значения возвращающегося, как ожидается, в журналах, но компонент команды не ,

Любые идеи относительно того, почему компонент не выполняет рендеринг, как ожидалось? Обратите внимание, что forEach дает тот же результат, что и карта в этом случае.

** Код был обновлен, чтобы отразить правильный ответ **

Answer 1

Общий контроль с моей стороны. Конечно, когда .map() применяется к массиву, новый массив равен , прогнозируемому. Таким образом, мы должны вернуть matchups.map, чтобы получить новое значение (массив), которое создается (проецируется).