无法通过数组映射对象数组

Question

我正在尝试从 api 获取数据并将其推送到数组中，然后映射它并将其呈现在页面上，但是当我尝试通过数组映射时我什么也没有得到。这是我的代码：

    let dataUrlNoPage = `https://api.themoviedb.org/3/movie/top_rated?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&page=`;

    let top100Array = [];

    const fetchData = () => {

for (let i = 1; i <= 5; i++) {

  fetch(dataUrlNoPage + i)

    .then((res) => res.json())

    .then((data) => {

      console.log(data);

      if (!data.errors) {

        for (let i = 0; i < data.results.length; i++) {

          top100Array.push(data.results[i]);

        }

        return top100Array;

      } else {

        setResults([]);

        console.log('error');

      }

    });

}

};

 fetchData();

console.log(top100Array);

我可以在控制台中看到 top100Array 。

const listItems = top100Array.map((movie) => (

<li key={movie.id}>

  <TopListCard movie={movie} />

</li>

));

 return (

<div className="container">

  <div className="row">

    <div className="col s12 m6">

      <div className="add-content">

        <h1>Top 20</h1>

        <ul className="results">{listItems}</ul>

        {console.log(listItems)}

      </div>

    </div>

  </div>

</div>

);

};

但我在这里得到空白页面。谢谢您的帮助。

Answer 1

您应该使用使用异步结果设置的状态，而不是改变top100Array（然后由于.then某种原因从）返回它，从而强制重新渲染。用于等待每次提取完成。Promise.allconst [results, setResults] = useState();const getData = i => fetch(dataUrlNoPage + i)&nbsp; .then((res) => res.json())&nbsp; .then((data) => {&nbsp; &nbsp; if (data.errors) {&nbsp; &nbsp; &nbsp; console.log(data.errors);&nbsp; &nbsp; &nbsp; throw new Error(data.errors);&nbsp; &nbsp; }&nbsp; &nbsp; return data.results;// Retrieve results only once, on mount:useEffect(() => {&nbsp; Promise.all(&nbsp; &nbsp; Array.from({ length: 5 }, (_, i) => getData(i + 1))&nbsp; )&nbsp; &nbsp; .then((allResults) => {&nbsp; &nbsp; &nbsp; setResults(allResults.flat());&nbsp; &nbsp; })&nbsp; &nbsp; .catch(handleErrors);}, []);然后渲染它：<ul className="results">{results ? listItems(results) : null}</ul>将 替换JSON.stringify为您想要将结果数组转换为 JSX 元素的值。（也许你想要results.map(result => <span>result.title</span>)，或者类似的东西）

Answer 2

不确定返回什么并且 for 循环不是最优的，但你不妨直接在 jsx 中映射<ul className='results'>&nbsp; {top100Array.map((movie) => (&nbsp; &nbsp; <li key={movie.id}>&nbsp; &nbsp; &nbsp; <TopListCard movie={movie} />&nbsp; &nbsp; </li>&nbsp; ))}</ul>

Answer 3

在我看来一切都很好。其实你并不需要回来top100Array。我唯一能想到的是你在top100Array填充项目之前渲染你的列表。