如何解决React中"items.map is not a function"错误

问题根源 #

1. 初始状态不匹配：你把items初始设为数组[]，但接口返回的是包含posts数组的对象。初始渲染时items.posts是undefined，调用undefined.map就会触发报错。
2. 请求URL错误：你用的https://dummyjson.com/posts#里的#是锚点标记，会导致请求异常，需要移除。

修复步骤及代码 #

• 把初始state改成包含空posts数组的对象，确保初始渲染时items.posts是合法数组
• 修正请求URL，移除末尾的#
• 给列表项添加key属性，符合React列表渲染的规范

修复后的完整代码：

import React, { useEffect, useState } from "react";

const Api = () => {
  // 初始state与接口返回结构对齐，包含空posts数组
  const [items, setItems] = useState({ posts: [] });

  const apiGet = () => {
    // 修正请求URL，移除末尾的#
    fetch("https://dummyjson.com/posts")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        setItems(json);
      })
      // 可选：添加错误捕获，排查请求异常
      .catch(err => console.error('请求出错:', err));
  };

  useEffect(() => {
    apiGet();
  }, []);

  return (
    <div>
      <ul>
        {items.posts.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Api;

替代方案（不修改初始state结构） #

如果不想调整初始state的结构，可以用可选链操作符?.规避undefined的情况，写法如下：

{items?.posts?.map((item) => (
  <li key={item.id}>{item.title}</li>
))}

不过更推荐统一初始state和接口返回的结构，代码逻辑会更清晰。

内容的提问来源于stack exchange，提问作者Rohit madhesia