Зацикливаясь на массиве объектов, я получаю ошибку с нулевым значением - PullRequest
Новая
       63

Зацикливаясь на массиве объектов, я получаю ошибку с нулевым значением

0 голосов
/ 29 октября 2019

Я получаю данные из API НХЛ (использую реагирование, редукцию и выборку API) и пытаюсь отобразить информацию о составе команды. Когда я консоль записываю ответ API-реестра в компонент, он работает правильно и отображает массив объектов, но когда я пытаюсь пройтись по нему, я получаю сообщение об ошибке, что ответ нулевой.

Вот чтосписок rosterList, который содержит ответ, выглядит следующим образом: https://gyazo.com/3f14d24b3a5bfb3610b470abedb6fcca

Вот действие с избыточностью: 

// Redux action
export const getRoster = id => async dispatch => {
  try {
    setLoading();
    const res = await fetch(
      `https://statsapi.web.nhl.com/api/v1/teams/${id}?expand=team.roster`
    );
    const data = await res.json();

    dispatch({
      type: GET_TEAM_ROSTER,
      payload: data['teams'][0].roster.roster
    });
  } catch (err) {
    dispatch({
      type: TEAM_ERROR,
      payload: err.response
    });
  }
};

И состояние с избыточностью: 

case GET_TEAM_ROSTER:
      return {
        ...state,
        currentRoster: action.payload,
        loading: false
      };

И, наконец,компонент, в котором я пытаюсь отобразить список: 

import React, { useEffect, useState } from 'react';
import styles from './teamroster.module.css';
import { getRoster } from '../../actions/teamActions';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

const TeamRoster = props => {
  const id = props.teamId;

  let rosterList = props.team.currentRoster;
  console.log(rosterList);

  useEffect(() => {
    props.getRoster(id);
    // eslint-disable-next-line
  }, []);

  return (
    <div className={styles.rosterContainer}>
      <p>This is the team roster</p>
      <ul>
        /*********** Error here, cannot read length of null ********/
        {!props.loading && rosterList.length === 0 ? (
          <p>No players available</p>
        ) : (
          rosterList.map((player, index) => (
            <li key={index}>{player.jerseyNumber}</li>
          ))
        )}
      </ul>
    </div>
  );
};

TeamRoster.propTypes = {
  getRoster: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  team: state.team
});

export default connect(
  mapStateToProps,
  { getRoster }
)(TeamRoster);

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

1 Ответ

0 голосов
/ 29 октября 2019

rosterList.length возвращает неопределенное значение, поскольку компонент выполняет рендеринг впервые, прежде чем rosterList будет возвращен из API. Добавьте проверку, чтобы убедиться, что rosterList существует, прежде чем пытаться вызвать «.length» для него.

Код будет выглядеть так: 

<ul>
    {props.loading || !rosterList ? (
      <p>No players available</p>
    ) : (
      rosterList && rosterList.map((player, index) => (
        <li key={index}>{player.jerseyNumber}</li>
      ))
    )}
</ul>
...