React父组件传递axios获取的prop给子组件报x属性undefined错误如何解决

方案1：父组件增加加载状态控制（最推荐） #

在数据请求完成前不渲染子组件，从根源避免子组件拿到未就绪的状态：

import axios from "axios";
import { useEffect, useState } from "react";
import Child from "../../components/fragments/Child";

export default function Parent() {
  // 注意：如果接口返回单条对象，初始值不要写数组，保持和返回值类型一致
  const [post, setPost] = useState({});
  // 新增加载状态
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const res = await axios.get("http://localhost:xxxxx");
        setPost(res.data);
      } catch (err) {
        // 可自定义请求失败的处理逻辑
        console.error('数据拉取失败', err)
      } finally {
        // 无论请求成功失败都关闭加载状态
        setLoading(false);
      }
    };
    fetchPost();
  }, []);

  // 加载状态下渲染占位内容，不挂载子组件
  if (loading) return <div>数据加载中...</div>;

  return (
    <>
      <Child post={post} />
    </>
  );
}

方案2：子层属性访问增加容错处理 #

如果需要子组件提前挂载，在所有访问post属性的位置使用可选链运算符 + 空值兜底：

// 解构时给post设置默认空对象，就算父组件漏传也不会出现undefined
export default function Child({ post = {} }) {
    return (
        <>
        {/* 访问属性的写法替换为可选链形式，无值时自动返回undefined，不会抛出错误 */}
        <div>{post?.title ?? "暂无标题"}</div>
        <div>{post?.content ?? "暂无内容"}</div>
        </>
    );
}

额外注意事项 #

• useState的初始值要和接口返回的post类型保持一致，如果返回的是对象就不要初始设置为空数组，类型不匹配也会导致属性访问异常
• 生产环境建议给整个组件树增加错误边界（Error Boundary）处理，就算出现异常也不会整页白屏

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