RTK Query请求未触发及数据使用致React崩溃问题求助

1. 初始渲染空值崩溃：RTK Query的useGetUsersQuery在组件首次渲染时，data初始值是undefined，你直接执行data.filter()会触发TypeError，导致组件立即崩溃，请求后续流程被中断，所以Redux DevTools里看不到请求记录。
2. useEffect依赖的误区：你依赖isSuccess触发useEffect，但isSuccess在请求成功后会一直保持true。如果组件因其他原因重新渲染（比如父组件状态变化），若data被重置为undefined（比如缓存被清理、组件卸载后重新挂载的初始阶段），useEffect会再次执行，这时调用filter依然会因为data为空报错。

方案1：空值保护+直接用RTK Query状态（推荐） #

不用额外的useState和useEffect，直接在渲染层做空值判断，利用RTK Query内置状态处理加载和错误：

import React from 'react';
import { useGetUsersQuery } from '../redux/apiSlice';
import { SupervisorTab } from './userviews/SupervisorTab';

export default function Teams() {
    const { data, isLoading, isError, error } = useGetUsersQuery()
    
    // 用可选链确保data存在时才执行filter
    const teams = data?.filter(e => e.role === "Supervisor")

    // 提前返回加载/错误状态，避免进入后续渲染逻辑
    if (isLoading) return <h1>Loading...</h1>;
    if (isError) return <h1>Error: {error?.message}</h1>;
    
    return(
        <div>
            <h1>Teams</h1>
            {teams?.map(t => <SupervisorTab supervisor={t} key={t._id} /> )}
        </div>
    )
}

方案2：修正useEffect依赖项 #

如果一定要用useState存处理后的数据，把data加入依赖数组，并在内部做空值判断：

import React, { useState, useEffect } from 'react';
import { useGetUsersQuery } from '../redux/apiSlice';
import { SupervisorTab } from './userviews/SupervisorTab';

export default function Teams() {
    const [teams, setTeams] = useState([])    
    const { data, isLoading, isError, error } = useGetUsersQuery()

    useEffect(()=>{
        if (!data) return; // 空值直接返回，不执行后续逻辑
        const teamInfo = data.filter(e => e.role === "Supervisor") 
        setTeams(teamInfo)
    }, [data]) // 依赖data而非isSuccess

    if (isLoading) return <h1>Loading...</h1>;
    if (isError) return <h1>Error: {error?.message}</h1>;
    
    return(
        <div>
            <h1>Teams</h1>
            {teams.map(t => <SupervisorTab supervisor={t} key={t._id} /> )}
        </div>
    )
}

额外排查点 #

如果问题还存在，检查这几点：

• 确认apiSlice的baseQuery配置正确，没有拦截该请求的逻辑；
• 查看是否有其他地方调用invalidatesTags: ['User']，导致缓存被强制清空，引发data重置；
• 检查浏览器Network面板，确认/userapi/users接口是否正常返回数据。

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