Estoy intentando usar los datos de 1 punto final para llamar a otro punto final filtrado por id. Estoy planeando obtener ambas llamadas usando getServerSideProps y pasar los datos a otro componente.

La primera llamada devolverá una serie de categories que luego intentaré reproducir en bucle y obtener articles filtrados por identificación.

Puedo recuperar con éxito la matriz de categories pero cuando intento hacer un bucle y obtener articles , obtengo un valor undefined . ¿Cómo puedo lograr esto?

Aquí hay un ejemplo de mi 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

Aquí hay un ejemplo de mi matriz console.log(categories.results) :

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

Espero que los articles sean 3 conjuntos de datos separados. ¿Es esto algo que es posible si estoy pasando los datos a otro componente? Si no, ¿cuál será una mejor manera de manejar esto?