时间戳

首页 > 解决方案 > 为什么我的 React 组件没有在 foreach 中呈现我想要的内容，而是 console.log 数组？

javascript - 为什么我的 React 组件没有在 foreach 中呈现我想要的内容，而是 console.log 数组？

问题描述

我正在学习有关 React 的在线课程，并且正在使用 API (swapi.co) 进行练习。我们的目标是使用 API 并制作一个可以随心所欲地使用它的 React 应用程序。

所以我正在尝试制作一个有输入的应用程序，每次输入更改时，它都会通过 API 获取匹配的字符并显示有关该字符的数据。其中一个数据是角色所在电影的名称，因此它是一个包含一个或多个字符串的数组。一切都很顺利，直到我尝试遍历该数组进行显示。它将 console.log 整个数组，但不会使用 foreach 循环遍历它。

这是我的结果组件：

class ResultPeople extends Component {
constructor() {
    super()
    this.state = {
        movieTitles: []
    }
}
getMovies(movies) {
    var movieTitleList = [];
    movies.forEach(element => {
        fetch(element)
        .then(resp => resp.json())
        .then(movieData => {
            movieTitleList.push(movieData.title);
        })
    });
    this.setState({movieTitles: movieTitleList});
    console.log('getMovies Done');
}
render() {
    const { resultdata } = this.props;
    const { name, films } = resultdata;
    return (
        <div className="result-characters text-white">
            <h2>{name}</h2>
            {films ? <button onClick={() => this.getMovies(films)}>See movies</button> : ''}
            {
                this.state.movieTitles ? <MovieList movies={this.state.movieTitles} /> : null
            }
        </div>
    );
}

}

这是电影清单：

const MovieList = ({ movies }) => {
return (
    <ul>
        {console.log(movies)}
        {
            movies.forEach(element => {
                return <li>{element}</li>;
            })
        }
    </ul>
);

}

我不知道它为什么会这样。console.log(movies) 效果很好（尽管取决于它记录不同数量的电影的时间，可能是因为 API？）。但是 foreach 没有。

这里的错误在哪里？谢谢 ！

标签： javascriptarraysreactjsforeach

解决方案

您进行了一系列返回 Promise 的异步调用，并且您需要等待所有这些调用都完成，然后再设置状态。

使用 fetch 调用迭代电影Array.map()，并返回承诺。等待所有 promise 完成使用Promise.all()，然后设置状态。

示例（未测试）：

getMovies(movies) {
  Promise.all(movies.map(element =>
    fetch(element)
    .then(resp => resp.json())
    .then(movieData => movieData.title)
  )).then(movieTitles => this.setState({ movieTitles }))
}

也可以在您的组件中使用Array.map()，因为您可以从Array.forEach().

注意：key应该是唯一的。在此示例中，我使用元素本身，但如果它们不是唯一的，则需要生成唯一键。

const MovieList = ({ movies }) => (
  <ul>
  {
    movies.map(element => (
      <li key={element}>{element}</li>;
    ))
  }
  </ul>
);

推荐阅读