React中硬编码URL与props传URL的异常问题排查

首先看你的错误信息：SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"，说明fetch请求返回的不是JSON数据，而是HTML内容（比如首页、404页面），结合304状态码，核心问题出在以下两点：

1. useEffect依赖缺失，未响应props的url变化 #

你的useEffect依赖数组是空的[]，这意味着它只会在组件首次挂载时执行一次：

• 硬编码URL时，组件初始化就拿到正确的URL，fetch请求正常返回JSON；
• 通过props传递URL时，如果父组件传递的URL是异步获取的、或者初始值不正确（比如undefined/空字符串），组件首次挂载时会用错误的URL发起请求，后续URL更新后，useEffect也不会重新执行，导致一直请求错误的地址，返回HTML内容。

2. 传递的props URL可能无效或格式错误 #

如果props传递的URL是相对路径但未正确配置，或者初始值为undefined，fetch会默认把当前页面的URL作为请求地址，此时返回的就是当前页面的HTML代码，自然无法解析为JSON。304状态码是浏览器的协商缓存，说明之前请求过这个错误的地址，浏览器直接返回了缓存的HTML内容。

修复方案 #

• 补全useEffect的依赖数组：把url加入依赖，确保URL变化时重新发起请求：

useEffect(() => {
  async function dateFetching() {
    setLoading(true); // 重新请求时重置loading状态
    try {
      const response = await fetch(url);
      // 先判断响应是否成功
      if (!response.ok) throw new Error('请求失败');
      const js = await response.json();
      setData(js);
    } catch (err) {
      console.error('数据获取失败:', err);
      // 可在此设置错误状态，给用户提示
    } finally {
      setLoading(false);
    }
  }
  // 只有url有效时才发起请求
  if (url) dateFetching();
}, [url]) // 加入url依赖

• 校验props传递的URL有效性：在父组件传递URL时确保其不为空、格式正确；也可以在PieChart组件内增加校验：

const PieChart = ({ url }) => {
  // 初始判断url是否有效
  if (!url) return <div>请提供有效的数据接口URL</div>;
  // ... 剩余代码
}

• 额外提醒：你的代码未使用获取到的data
  目前你通过fetch获取了data但并未用到，当前渲染的chart是硬编码的固定数据，后续需要把data映射到chart的datasets[0].data中，才能实现动态渲染饼图。

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