Reactjs 如何使用Next.js循环获取数组并显示结果

我正在尝试循环遍历一个数组并获取这些结果以在我的站点上单独显示，但我一直收到以下错误消息：

类型错误：this.props.fetched.map不是函数

不知道我为什么会出错。有什么想法吗

这是我目前正在编写的代码：

import React from "react";
import "isomorphic-unfetch";

export default class HomePage extends React.Component {
  static async getInitialProps() {
    const todoIdList = [1, 2, 3, 4];
    for (const id of todoIdList) {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${id}`
      );
      const todo = await response.json();
      return { fetched: todo.title };
    }
  }

  render() {
    return (
      <>
        <div>
          {this.props.fetched.map((datafetch, index) => (
            <p>{datafetch}</p>
          ))}
        </div>
      </>
    );
  }
}

从“React”导入React；
导入“同构未蚀刻”；
导出默认类扩展React.Component{
静态异步getInitialProps（）{
常数todoIdList=[1,2,3,4]；
for（todoIdList的常量id）{
const response=等待获取(
`https://jsonplaceholder.typicode.com/todos/${id}`
);
const todo=wait response.json（）；
返回{fetched:todo.title}；
}
}
render（）{
返回(
{this.props.fetched.map（（datafetch，index）=>(
{datafetch}

))}
);
}
}

您正在调用此url

https://jsonplaceholder.typicode.com/todos/${id}

将返回一个对象

您正在这样设置您的状态

return{fetched:todo.title}

这意味着您获取的变量现在持有一个字符串值

但javascript的map函数只在数组上起作用。因此，您将获得此错误

你可以试试这样的

    const todoIdList = [1, 2, 3, 4]; 
    const todoTitles = []
    for (const id of todoIdList) {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${id}`
      );
      const todo = await response.json(); 
      todoTitles.push(todo.title)
      
    }
    return { fetched: todoTitles };
  }

---

您正在尝试使用map迭代对象

如果你想使用地图，你需要先变换它。然后，您可以尝试以下方法：

{
    let aux = [];
    for (let [key, value] of Object.entries(this.props.fetched)) {
        aux.push(value);
    }

    aux.map((datafetch, index) => (
        <p>{datafetch}</p>
    ));
}

{
设aux=[]；
for（让Object.entries的[key，value]（this.props.fetched））{
辅助推力（值）；
}
辅助映射（（数据提取，索引）=>(
{datafetch}

));
}

api调用的响应是什么？