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

Question

我正在学习有关 React 的在线类(class)，并且正在使用 API ( swapi.co ) 进行练习。我们的目标是使用 API 并制作一个可以执行我们想要的任何操作的 React 应用程序。

所以我试图制作一个具有输入的应用程序，每次输入发生变化时，它都会通过 API 获取匹配的字符并显示有关该字符的数据。其中一个数据是 Angular 色所在电影的名称，因此它是一个包含一个或多个字符串的数组。一切都很顺利，直到我尝试循环该数组来显示。它将 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 却没有。

这里错在哪里？ 谢谢!

Answer 1

您进行了一系列返回 Promise 的异步调用，并且需要等待所有调用完成才能设置状态。

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

示例(未测试):

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 应该是唯一的。在此示例中，我使用元素本身，但如果它们不唯一，您将需要生成一个唯一的 key 。

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