React.js调用外部API取值存变量时遇到JSON解析错误如何解决？

核心问题是你在fetch配置中加了mode: 'no-cors'参数。
no-cors模式仅适用于无需读取响应内容的跨域请求（如埋点上报），该模式下返回的响应为不透明类型，你无法读取响应体的实际内容，所以哪怕状态码显示200，响应体也是空值，调用response.json()解析空内容自然会触发JSON解析失败的报错。

• 如果你请求的是同域下的myurl.json文件，直接删除mode: 'no-cors'配置即可，同域请求不需要额外配置跨域参数。
• 如果你请求的是跨域的外部API，需要联系接口服务端配置CORS跨域访问权限，前端设置no-cors无法解决跨域问题，反而会导致你无法读取返回数据。

你现有代码还存在两处可优化的点：

1. response.json()是异步方法，直接打印会拿到pending状态的Promise对象，需要等待该Promise resolve后才能拿到实际的JSON数据。
2. 你目前没有完整处理请求的成功、失败、加载状态逻辑，修正后的完整代码如下：

import { useState, useEffect } from 'react';

const FetchingApi = (props) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("myurl.json", { method: 'GET'})
      .then(response => {
        // 校验请求状态
        if (!response.ok) {
          throw new Error(`请求异常，状态码：${response.status}`);
        }
        return response.json();
      })
      .then(result => {
        // 存储返回数据
        setData(result);
        setError(null);
      })
      .catch(err => {
        // 捕获请求、解析阶段的所有报错
        setError(err.message);
        setData([]);
      })
      .finally(() => {
        // 无论成功失败都结束加载状态
        setLoading(false);
      })
  }, [])

  // 不同状态的UI渲染
  if (loading) return <div>加载中...</div>
  if (error) return <div>请求出错：{error}</div>
  
  return (
    <>
      <div>
        请求获取到的数据：{JSON.stringify(data, null, 2)}
      </div>
    </>
  )
}

export default FetchingApi;

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