Question

我通过从API提取来检索数据数组。在我的React组件中，当我使用mapStateToProps和.map（）时，我能够显示数组的内容。但是，如果我尝试仅从数组中获取一个元素（例如array [0]），则该元素将始终返回未定义的状态。

/* 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，但是实际输出是一个错误，提示无法获得未定义的标题。

Answer 1

您为什么不访问

{this.props.movie.title}

喜欢

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

对我来说似乎更合逻辑。这可能是解决方案。
如果我错了请纠正我。

您也可以console.log {this.props.movie}

Answer 2

电影最初可能是空数组，由于您正在访问零索引位置，因此在访问零索引之前应检查其长度。

更改

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

收件人

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

由于电影始终是数组，因此直接检查其长度即可解决问题

Answer 3

原因是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>;
    }
  }
}

无法从数组中获取特定元素。 React / Redux

3 个答案: