React+Rails项目刷新PostDetail页面出现无法读取id的Uncaught TypeError

错误原因 #

刷新页面时，组件初始化阶段post的初始值为undefined，而useEffect的依赖数组直接引用了post.id，此时后端数据尚未返回，尝试读取undefined的id属性就会抛出Cannot read properties of undefined (reading 'id')错误。

解决方案 #

以下是几种可行的修复方式：

• 给post设置初始默认值
  在useState初始化时给post设置一个包含id属性的空值对象，避免初始状态为undefined：

  const [post, setPost] = useState({ id: null });
  
  useEffect(() => {
    if (post.id) {
      // 执行需要post.id的逻辑，比如获取评论、点赞数据
    }
  }, [post.id]);
  

• 使用可选链操作符做安全判断
  在useEffect的依赖和内部逻辑中使用?.可选链，确保只有当post存在时才访问id：

  const [post, setPost] = useState();
  
  useEffect(() => {
    if (post?.id) {
      // 执行需要post.id的逻辑
    }
  }, [post?.id]);
  

• 增加加载状态判断
  在组件渲染前先判断post是否加载完成，未完成时显示加载提示，避免后续逻辑访问未初始化的post：

  const [post, setPost] = useState();
  
  if (!post) {
    return <div>加载中...</div>;
  }
  
  useEffect(() => {
    // 执行需要post.id的逻辑
  }, [post.id]);
  

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