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

您应该使用设置了异步结果的 state ，而不是对top100Array进行突变（然后出于某种原因从.then返回），这样强制重新渲染。使用Promise.all等待每次提取完成。

const [results, setResults] = useState();
const getData = i => fetch(dataUrlNoPage + i)
  .then((res) => res.json())
  .then((data) => {
    if (data.errors) {
      console.log(data.errors);
      throw new Error(data.errors);
    }
    return data.results;
// Retrieve results only once, on mount:
useEffect(() => {
  Promise.all(
    Array.from({ length: 5 }, (_, i) => getData(i + 1))
  )
    .then((allResults) => {
      setResults(allResults.flat());
    })
    .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'>
  {top100Array.map((movie) => (
    <li key={movie.id}>
      <TopListCard movie={movie} />
    </li>
  ))}
</ul>

Answer 3

对我来说一切都很好。您实际上不需要返回top100Array。我唯一想到的是您在top100Array充满项目之前呈现列表。

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

3 个答案: