Не удается получить конкретный элемент из массива.Реагировать / Redux

Question

Я получаю массив данных через выборку из API. В моем React Component, когда я использую mapStateToProps и .map (), я могу отображать содержимое массива. Однако, если я пытаюсь получить только один элемент из массива, например, array [0], он продолжает возвращать undefined.

/* HomePage class Component: Ascendent of Banner */
class HomePage extends Component {
  componentWillMount() {
    this.props.fetchMovies();
  }

  render() {
    const movie = this.props.movies[0];

    return (
      <div>
        <Banner movies={this.props.movies} movie={movie} />
        <Movies movies={this.props.movies} />
      </div>
    );
  }
}

HomePage.propTypes = {
  fetchMovies: PropTypes.func.isRequired,
  movies: PropTypes.array.isRequired
};

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

export default connect(
  mapStateToProps,
  { fetchMovies }
)(HomePage);












/* Banner class Component: Descendent of HomePage */
class Banner extends Component {
  render() {
    const movieList = this.props.movies.map(movie => {
      return <li>{movie.title}</li>;
    });

    return (
      <div style={styles.BannerContainer}>
        <div style={styles.Banner}>
          <div style={styles.BannerText}>
            <h1 style={styles.BannerTextHeader}>{this.props.movie.title}</h1>
            <p style={styles.BannerTextParagraph}>
              Arthur Curry learns that he is the heir to the underwater kingdom
              of Atlantis, and must step forward to lead his people and be a
              hero to the world.
            </p>

            <ul>{movieList}</ul>

            <Button content={"Check It Out"} />
          </div>

          <div style={styles.BannerImage} />
          <div style={styles.BannerOverlay} />
        </div>
      </div>
    );
  }
}

export default Banner;

Я ожидаю, что this.props.movie.title будет равен this.props.movies [0] .title, но фактический вывод - ошибка, говорящая, что не может получить заголовок undefined.

Answer 1

Изначально фильмы могут быть пустым массивом, и, поскольку вы обращаетесь к нулевой позиции индекса, вы должны проверить ее длину, прежде чем получить доступ к нулевому индексу.

Изменение

  const movie = this.props.movies[0];

К

  if(this.props.movies.length){
      const movie = this.props.movies[0];
      console.log(movie);
 }

Поскольку фильмы всегда являются массивом, поэтому проверка их длины напрямую решит проблему

Answer 2

Причина в том, что this.props.movies не определен при первом рендеринге), пока вы не сделаете вызов fetchMovies).

Попробуйте сначала проверить, существует ли он, например так:

class HomePage extends Component {
  componentWillMount() {
    this.props.fetchMovies();
  }

  render() {
    if (this.props.movies && this.props.movies[0]) {
      const movie = this.props.movies[0];
      return (
        <div>
          <Banner movies={this.props.movies} movie={movie} />
          <Movies movies={this.props.movies} />
        </div>
      );
    } else {
      <div>Loading...</div>;
    }
  }
}

Answer 3

Почему бы вам не получить доступ

{this.props.movie.title}

Как

{this.props.movie[0].title}

Мне кажется более логичным.И это может быть решением.поправьте меня, если я ошибаюсь.

И не могли бы вы также console.log {this.props.movie}