React & Redux: у меня есть состояние в фоновом режиме, но я не могу отобразить сквозной массив в моем JSX

Question

Пока что у меня есть GET_TOURNAMENTS, который устанавливает все турнирные объекты в моем состоянии, и я отображаю их на странице.

Затем я дал каждому турниру кнопку, вызывающую showTournament(), которая выбирает любой турнир Я нажимаю и обновляю состояние. Когда я нажимаю SHOW_TOURNAMENT, мое состояние выглядит так:

tournament
  tournaments: [{...}, {...}]           <<~~this is from GET_TOURNAMENTS
  showTournament: {                     <<~~begins as (showTournament: "") until showTournament() action
    _id: "etc",
    title: "Tournament One",
    status: "Open",
    participants: [                          <<~~an array of User objects
      0: {_id: "asdf", username: "asdf"},
      1: {_id: "asdf", username: "asdf"}
    ]
  }

Annnnnnnnd Я попытался отобразить все это в своем компоненте ShowTournament, выполнив:

class TournamentShow extends Component {
    static propTypes = {
        tournament: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired
    };

    render() {
        const { _id, title, hostedBy, status, participants } = this.props.tournament.showTournament;

        return (
            <div>
                <h1>{ title }</h1>
                <p>status: { status }</p>
                <p>Registered Participants:</p>
                {
                    participants ?
                    participants.forEach(participant => {
                        return (
                            <ul>
                                <li>{participant}</li>
                            </ul>
                        )
                    }) :
                    null
                }
                <p>Hosted by: { hostedBy }</p>
                <Link to="#">Sign Up</Link><br/>
                <Link to="/">Back to Tournaments main page</Link>
            </div>
        )
    }
};

const mapStateToProps = state => ({
    tournament: state.tournament,
    auth: state.auth
});

export default connect(mapStateToProps, { showTournament })(TournamentShow);

Это ничего не показывает. Ничего не отображается, даже если в массиве есть участники.

Я также попробовал просто << ~~ EDITED: сначала у меня были теги внутри, поместите их за пределы {} </p>

                <p>Registered Participants:</p>
                <ul>
                  {
                      participants.forEach(participant => {
                          return (
                              <li>{participant}</li>
                          )
                      })
                  }
                </ul>

к которому я получаю сообщение об ошибке TypeError: Cannot read property 'forEach' of undefined

Все данные без массива из showTournament отображаются нормально .. Я нашел другие вопросы о переполнении стека и попробовал ряд решений, но другие вопросы просто настолько разные, что я не могу понять, как получить правильную реализацию.

Всем спасибо!

Answer 1

1) Вам нужно использовать map, потому что forEach ничего не возвращает, поэтому все, что вы возвращаете в forEach, даже не видно внешнему миру forEach. map вернет массив.

2) Что вы пытаетесь сделать с помощью {participant}? Это объект, поэтому либо напечатайте его, используя JSON.stringify(participant), либо еще лучше, напечатайте _id и username отдельно, как показано ниже:

participants.map(participant => 
   (
      <ul>
         <li>{participant._id}</li>
         <li>{participant.username}</li>
      </ul>
   )
)

3) Если вы получаете сообщение об ошибке тогда вполне вероятно, что participants будет undefined. Можете ли вы попробовать отладку и посмотреть, заполнены ли его значения или нет. Если отладка невозможна, просто попробуйте распечатать его, используя

<div>{JSON.stringify(participants)}</div>

или даже

<div>{JSON.stringify(this.props.tournament.showTournament)}</div>

Answer 2

Прежде всего вам нужно использовать Array.prototype.map () для рендеринга массива, Array.prototype.forEach () ничего не возвращает для рендеринга, это просто применяет данную функцию к каждому элементу массива.

Затем убедитесь, что у вас есть правильные данные от редуктора, просто установите breakpoint или используйте console.log, чтобы увидеть данные, которые вы пытаетесь визуализировать.

<ul>
  {
    participants.map(participant => (
      <li key={participant._id}>
        {participant.username}
      </li>
    ))
  }
</ul>