Question

在循环中获取数据 next js

2021-12-08

5005

javascript reactjs next.js

我试图使用来自 1 个端点的数据来调用另一个通过 id 过滤的端点。我计划使用 getServerSideProps 获取这两个调用，并将数据传递给另一个组件。

第一个调用将返回一个 categories 数组，然后我尝试循环并获取按 id 过滤的 articles 。

我能够成功返回 categories 数组，但是当我尝试循环并获取 articles 时，我得到的值是 undefined 我该如何实现？

这是我的 index.js 的一个示例

import ArticleList from "../../components/ArticleList";


const Index = ({ categories, articles }) => {


  return (
    <>
      <ArticleList categories={categories} articles={articles} />
    </>
  )
}

export async function getServerSideProps (context) {
   // console.log('index - getserversideprops() is called')
   try {
     let articles = []
    let response = await fetch('https://example.api/categories')
    const categories = await response.json()

    for (let i = 0; i < categories.results.length; i++) {
      response = await fetch (`https://example.api/articleid/` + categories.results[i].id)
      articles = await response.json()
    }

    console.log(articles,'33')


    if (!categories ) {
        return {
            notFound: true,
        }
    }

    return { 
      props: { 
        categories: categories,
        articles: artices
      }
    }
  } catch (error) {
      console.error('runtime error: ', error)
  }
}

export default Index

这是我的 console.log(categories.results) 数组的一个示例：

[ {
"id": 2,
"name": "Online"
},
{
"id": 11,
"name": "Retail"
},
{
"id": 14,
"name": "E-Commerce"
}]

我预计 articles 将是 3 个独立的数据数组。如果我将数据传递给另一个组件，这是否可行？如果不行，有什么更好的处理方法吗？

Answer 1

尝试 Promise.all

export async function getServerSideProps(context) {
  try {
    const categories = await fetch('https://example.api/categories').then((response) => response.json());

    if (!categories) {
      return { notFound: true };
    }

    const articles = await Promise.all(
      categories.results.map((result) =>
        fetch(`https://example.api/articleid/` + result.id).then((response) => response.json())
      )
    );

    const props = { categories, articles };

    return { props };
  } catch (error) {
    console.error('runtime error: ', error);
  }
}

代码会很干净。