React中map报Cannot read properties of undefined错解决方法

这个错误的核心是你调用.map()方法的目标值为undefined，结合代码来看是典型的首次渲染时序问题：

• 你给post状态设置的初始值是空对象{}，组件第一次挂载时，useEffect里的接口请求还处于pending状态，还没执行setPost写入接口返回值。这时候读取post.categories得到的是undefined，对undefined调用数组方法map就会直接抛出你看到的类型错误。
• 代码里还有两处隐藏问题：一是你单独维护的categories状态初始值设成了空字符串，字符串本身没有map方法，后续如果误用这个状态渲染也会报错；二是组件返回JSX的位置漏写了return关键字，会直接导致语法报错。

按以下顺序定位即可：

• 校验接口返回结构：在axios请求回调里打印res.data，确认返回体中确实存在categories字段，且字段值为数组类型，排除后端漏返回、字段名拼写错误（比如写成category/categoris）的问题。
• 校验初始渲染状态：组件首次渲染发生在useEffect执行之前，这时候所有状态都是你手动设置的初始值，检查初始值下调用map的目标是否为合法数组。
• 校验取值逻辑一致性：你同时存了post对象和独立的categories状态，但渲染时取的是post.categories，确认没有出现状态更新了但取值路径错漏的问题。

最小改动的可运行代码如下，关键位置加了注释说明：

export default function SinglePost() {
  // 初始化post时给categories预设空数组，避免首次渲染取到undefined
  const [post, setPost] = useState({
    categories: []
  });
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  // 数组类型的状态初始值必须设为空数组，不能给空字符串
  const [categories, setCategories] = useState([]);
  
  useEffect(() => {
    const getPost = async () => {
      const res = await axios.get("/posts/" + path);
      setPost(res.data);
      setTitle(res.data.title);
      setDesc(res.data.desc);
      // 加兜底逻辑，后端偶发不返回categories字段时默认赋值空数组
      setCategories(res.data.categories || []);
    };
    getPost()
  }, [path]);
  
  // 补全return关键字返回JSX
  return (
    <div className="singlePost">
      <div className="singlePostInfo">
        <div className="postCats">
          {/* 渲染时加兜底，就算post.categories意外为undefined/null也不会报错 */}
          {(post.categories || []).map((c) => (
            <span className="postCat" key={c._id}>
              Category: {c.name}
            </span>
          ))}
        </div> 
      </div>
    </div>
  )
}

优化建议 #

• 可以删掉冗余的title/desc/categories独立状态，直接从post对象里解构取值，避免多状态同步维护的成本，写法参考：

  const [post, setPost] = useState({ categories: [] });
  const { title, desc, categories = [] } = post;
  

  渲染时直接调用categories.map即可，逻辑更简洁。
• 建议增加接口加载态判断，请求未返回时展示加载提示，不要直接渲染依赖接口数据的内容。
• 养成类型兜底习惯：对来源不确定（接口返回、路由参数、用户输入）的数组类型值，调用map/filter等数组方法前，统一加|| []兜底，避免类型错误。

内容的提问来源于stack exchange，提问作者sultan.h