React使用Fetch API从state取url请求报Unexpected token < in JSON错误

这个报错的本质是接口返回的内容不是合法JSON格式，而是HTML字符串（通常是404、500错误页的内容，开头为<字符），调用response.json()解析失败。触发该问题的具体原因来自你的代码逻辑缺陷：

1. useEffect依赖缺失导致请求时机错误
   你执行fetch请求的useEffect依赖数组为空，组件挂载时会立即执行，但此时设置url状态的useEffect还未完成赋值，或者url的初始值为undefined/空字符串，导致fetch请求的地址错误，触发404返回HTML。
   而且请求逻辑没有监听url的变化，就算后续url被赋值为正确值，也不会重新发起请求。
2. 路径格式不匹配
   你硬编码的请求地址是api/provinsi（无开头斜杠，为相对当前页面路径的相对地址），但通过setUrl设置的地址是/api/provinsi（带开头斜杠，为站点根路径的绝对地址）。如果你的React项目没有部署在域名根目录，带斜杠的地址会请求到不存在的路径，返回404页面。

• 首先给请求的useEffect添加url作为依赖项，保证只有url更新为有效值之后才发起请求，同时增加空值判断，url为空时不发起请求：

useEffect(() => {
  // url为空时不发起请求
  if (!url) return
  async function fetchMyAPI() {
    try {
      const response = await fetch(url, { method: 'GET' })
      if(!response.ok) {
        // 报错前先打印返回内容排查问题
        const text = await response.text()
        console.log('接口返回非成功状态，内容：', text)
        throw new Error(response.statusText)
      }
      const resData = await response.json()
      if(resData.Response === 'False') {
        throw new Error(resData.Error)
      }
      setData(resData.data)
    } catch (error) {
      console.log("Error fetching data: ", error)
    }
  }
  fetchMyAPI()
}, [url]) // 把url加入依赖数组

• 统一路径格式，和硬编码可用的路径保持一致，如果相对路径可用，就去掉setUrl时路径开头的斜杠：

// 修改前：setUrl('/api/provinsi')
// 修改后：
setUrl('api/provinsi')

• 如果你需要使用绝对路径，确保你的开发服务器/生产环境配置了对应的API代理，路径可以正确匹配到后端接口。

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