React报错：无法访问属性'slug'，_ref未定义 求助

1. 路由参数获取逻辑错误 #

• 如果你使用React Router v6，需通过useParams()正确获取路由参数，避免解构未定义的对象：

  // 正确写法
  const { slug } = useParams();
  

• 检查App.js中的路由配置，确保已正确定义:slug参数路径：

  // App.js 路由示例
  <Routes>
    <Route path="/blog/:slug" element={<BlogDetail />} />
  </Routes>
  

2. 数据请求返回结构不匹配 #

• 若请求博客数据时，返回的响应结构与解构逻辑不符（比如返回数组而非单个对象，或接口返回空数据），会触发该错误。需先校验数据存在性再解构：

  const fetchBlog = async () => {
    try {
      const res = await fetch(`${process.env.REACT_APP_API_URL}/blogs/${slug}`);
      if (!res.ok) throw new Error('请求失败');
      const data = await res.json();
      if (!data) return;
      // 确认data为预期对象后再解构
      const { slug, title, content } = data;
      // 后续渲染逻辑
    } catch (err) {
      console.error('获取博客数据失败:', err);
    }
  };
  

3. .env变量配置问题 #

• 检查.env中的API地址变量是否符合React规范（必须以REACT_APP_开头），且无拼写错误：

  REACT_APP_API_URL=http://localhost:3001/api
  

• 注意：修改.env后需重启开发服务器，否则变量不会生效。

4. 异步操作未捕获异常 #

• 错误提示中的Unhandled Rejection说明异步请求未做异常处理，需添加try/catch或.catch()捕获错误：

  useEffect(() => {
    fetchBlog().catch(err => console.error(err));
  }, [slug]);
  

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