React数据请求报错求助：usestate相关TypeError问题排查

核心报错原因 #

你代码里的usestate是错误写法，React的状态钩子是大写开头的useState，小写的usestate并不是React提供的内置钩子，所以会抛出“不是函数或返回值不可迭代”的错误。

其他需要修正的问题 #

除了钩子名称的错误，你的代码还有几个潜在问题，一起修正才能正常运行：

• fetch请求未传递JSON数据：resp.json()是异步操作，需要用return将结果传递给下一个then
• useEffect无限循环：未设置依赖数组，会导致组件每次渲染都重新发起请求
• 接口数据不匹配：你请求的https://jsonplaceholder.typicode.com/posts返回的是文章列表，不是用户数据，无法解构出login字段
• 错误状态设置错误：setIsError应该设置为布尔值true，而非直接赋值错误对象

修正后的完整代码 #

import React, { useState, useEffect } from "react";

// 更换为用户详情接口，匹配你要获取的login字段
const url = "https://jsonplaceholder.typicode.com/users/1";

const MultipleReturns = () => {
  const [isLoading, setLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [user, setUser] = useState("Default user");

  useEffect(() => {
    fetch(url)
      .then((resp) => {
        if (!resp.ok) {
          throw new Error("请求失败");
        }
        return resp.json(); // 必须return传递异步结果
      })
      .then((userData) => {
        const { login } = userData;
        setUser(login);
        setLoading(false);
      })
      .catch((err) => {
        setIsError(true);
        setLoading(false); // 错误时也要终止加载状态
      });
  }, []); // 空依赖数组，确保请求仅在组件挂载时执行一次

  if (isLoading) {
    return (
      <div>
        <h4>....Loading</h4>
      </div>
    );
  }

  if (isError) {
    return (
      <div>
        <h4>....Error</h4>
      </div>
    );
  }

  return (
    <>
      <div>MultipleReturns</div>
      <h4>{user}</h4>
    </>
  );
};

export default MultipleReturns;

关键修正点说明 #

• 所有usestate替换为useState，符合React钩子的命名规范
• 给useEffect添加空依赖数组[]，避免请求无限循环
• 修复fetch的JSON数据传递逻辑，同时增加响应状态判断（resp.ok）
• 更换接口为用户详情接口，确保能获取到login字段
• 错误处理时同步更新加载状态，并将isError设为布尔值

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