Почему моя переменная массива не определена в моем компоненте, когда я пытаюсь использовать методы массива на нем?

Question

У меня проблема с отображением массива движений покемонов, которые я извлек из базы данных (используя rails / реакции / redux). Странно то, что когда я отображаю весь массив, не пытаясь использовать join, все в порядке. Но когда я пытаюсь использовать join, я получаю это сообщение об ошибке: Uncaught TypeError: Cannot read property 'join' of undefined. И когда я отображаю переменную всего массива как есть, ничего не изменяя, она отображает.

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

// компонент, который отображает мои данные покемонов на странице

class PokemonDetail extends React.Component {
  componentDidMount() {
    this.props.requestSinglePokemon(this.props.match.params.pokemonId);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.pokemonId !== this.props.match.params.pokemonId) {
      this.props.requestSinglePokemon(this.props.match.params.pokemonId);
    }
  }

  render() {
    const { pokemon } = this.props;
    if (!pokemon) return null;
    return (
      <section className='pokemon-detail'>
        <figure>
          <img src={ pokemon.image_url } alt={ pokemon.name } />
        </figure>
        <ul>
          <li><h1>{ pokemon.name }</h1></li>
          <li>Type: { pokemon.poke_type }</li>
          <li>Attack: { pokemon.attack }</li>
          <li>Defense: { pokemon.defense }</li>
          <li>Moves: { pokemon.moves.join(', ') }</li>
        </ul>
      </section>
    );
  }
}

// редуктор

const pokemonReducer = (state = {}, action) => {
  Object.freeze(state);
  let poke;
  switch(action.type) {
    case RECEIVE_ALL_POKEMON:
      return Object.assign({}, state, action.pokemon);
    case RECEIVE_SINGLE_POKEMON:
      poke = action.payload.pokemon;
      return Object.assign({}, state, { [poke.id]: poke });
    default:
      return state;
  }
}

// создатели действий

export const requestSinglePokemon = id => dispatch => {
  dispatch(startLoadingSinglePokemon());
  return APIUtil.fetchSinglePokemon(id).then(pokemon => dispatch(receiveSinglePokemon(pokemon)));
}

export const receiveSinglePokemon = payload => ({
  type: RECEIVE_SINGLE_POKEMON,
  payload
});

// внутренний метод APIUtil

export const fetchSinglePokemon = id => (
  $.ajax({
    method: 'GET',
    url: `api/pokemon/${id}`
  })
);

Это самая странная вещь ... когда я делаю { JSON.stringify(pokemon.moves) } Я буквально вижу, что это массив строк (ходов покемонов). И даже когда я просто показываю это так, { pokemon.moves }, кажется, что он правильно подбирает нужного покемона; текст, имя, тип, атака и защита - все там, и ходы также отображаются (хотя и неправильно отформатированы).

ПРИМЕЧАНИЕ. После просмотра моего журнала (он показывает мне создателей действий, которые отправляются, когда я взаимодействовать со страницей), ошибка с join появляется перед (или вместо?) создателем действия, который должен был быть отправлен (т.е. я вижу, что действие START_LOADING_SINGLE_POKEMON никогда не отправляется до появления этой ошибки)

Answer 1

для первого рендеринга вашего приложения, никаких действий не было отправлено. componentDidMount происходит после начального рендеринга. следовательно, если родительский компонент «PokemonDetail» не передает первоначальный объект pokemon с ключом «move», значение которого имеет тип array, он вызовет эту ошибку для первого рендеринга.

вы можете иметь условный рендеринг внутри Компонент «PokemonDetail», основанный на объекте «Pokemon» или имеющий начальное состояние «pokemon», содержит массив ходов в редукторах.