React通过Bearer Token获取数据时出现dispatchSetState错误

你的代码主要存在以下几个问题，调整后即可解决相关错误：

• 依赖数组遗漏关键变量
  你的useEffect依赖数组是空的，但内部用到了accessToken。如果accessToken是组件状态或外部传入的props，当它更新时，useEffect不会重新执行，会导致请求携带旧的accessToken（甚至可能是undefined），进而引发请求失败或闭包相关的状态更新警告。需要把accessToken加入依赖数组：

  useEffect(() => {
    // 请求逻辑
  }, [accessToken]);
  

• 缺少请求错误处理
  fetch仅在网络故障时抛出错误，像401未授权、500服务器错误这类HTTP状态码不会触发catch。如果请求返回错误状态，res.json()可能无法正常解析，引发未捕获错误，间接触发状态更新相关警告。必须添加错误处理逻辑：

  useEffect(() => {
    fetch("https://myapi.com/api/products", {
      method: "GET",
      headers: { Authorization: `Bearer ${accessToken}` },
    })
      .then((res) => {
        if (!res.ok) {
          throw new Error(`请求失败，状态码：${res.status}`);
        }
        return res.json();
      })
      .then((json) => setResult(json))
      .catch((err) => {
        console.error("请求出错：", err);
        // 可在这里添加错误状态处理，比如setResult(null)
      });
  }, [accessToken]);
  

• 初始状态未明确
  useState()未设置初始值，虽然不是直接报错的原因，但建议根据接口返回数据类型设置合理初始值（比如空数组[]或null），让组件状态更清晰：

  const [result, setResult] = useState(null);
  

另外，代码里的console.log(setResult)只是输出状态更新函数本身，没有实际作用，可以直接删除。

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