异步API GET响应无法存入useState Hook问题排查

核心问题1：useEffect无限触发且状态存成了字符串 #

你在useEffect里把API返回的数组用JSON.stringify转成字符串存在data里，后续代码又把data当数组调用filter、sort等方法，必然报错。同时useEffect未添加依赖数组，会导致组件每次渲染都重复发起请求，状态更新逻辑混乱。

修复：

• 移除JSON.stringify，直接存储原始数组：setTutors(resp.data.body)
• 给useEffect添加空依赖数组，确保仅在组件挂载时发起一次请求：

useEffect(() => {
    const retrieveData = async () => {
        try { // 增加错误捕获，避免请求失败导致组件崩溃
            const resp = await axios.get('API URL Call');
            console.log("Response: ", resp.data.body);
            setTutors(resp.data.body); // 直接存入数组
        } catch (err) {
            console.error('获取导师数据失败:', err);
        }
    }
    retrieveData();
}, []); // 空依赖数组限制执行时机

核心问题2：直接修改原状态数组（sort的副作用） #

Array.sort()会直接修改原数组，违反React状态不可变原则，会导致状态更新异常、渲染逻辑混乱。

修复：
排序前先复制原数组，对副本进行排序操作，同时使用函数式更新确保拿到最新状态：

function handleSortByName() {
    setTutors(prevData => {
        // 复制数组避免修改原状态
        const sortedData = [...prevData].sort((a, b) => 
            !sorted ? a.first_name.localeCompare(b.first_name) : b.first_name.localeCompare(a.first_name)
        );
        setSorted(!sorted);
        return sortedData;
    });
}

function handleSortByDept() {
    setTutors(prevData => {
        const sortedData = [...prevData].sort((a, b) => 
            !sorted ? a.department.localeCompare(b.department) : b.department.localeCompare(a.department)
        );
        setSorted(!sorted);
        return sortedData;
    });
}

（注：这里把排序字段统一为first_name，和你filter逻辑里的字段保持一致，避免字段不匹配导致排序无效）

核心问题3：空状态下的容错处理 #

组件初始化时data为空数组，虽然filter不会报错，但如果API返回前data意外变为非数组，会导致代码崩溃。增加类型判断和可选链容错：

const filteredTutors = Array.isArray(data) 
    ? data.filter(tutor => tutor.first_name?.toLowerCase().startsWith(searchTerm.toLowerCase()))
    : [];

额外建议 #

• 始终确保状态更新的不可变性：修改数组/对象状态时，一定要创建副本再修改，避免直接操作原状态；
• 统一字段名：检查API返回的字段是否和你代码中使用的一致（比如name还是first_name），避免逻辑失效；
• 调试时可以在组件根级别打印data状态，确认是否正确更新：console.log("当前data状态:", data)

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