Redux Toolkit初始空数组state为何显示success:false？

问题根源 #

你看到的data显示为{success:false}并非初始状态值，而是首次接口请求返回了错误响应，并被错误地存入了state。核心原因有两点：

1. fetch API仅在网络故障时才会触发Promise reject，接口返回的HTTP错误状态码（如400、404）不会导致reject，因此错误响应会进入fulfilled分支，覆盖掉初始的空数组。
2. 你在请求时直接传入了localStorage.getItem("userid")，如果该值为null或无效值，接口会返回{success:false}的错误响应，最终被赋值给state.data。

修复步骤 #

1. 修正AsyncThunk的错误处理 #

在loadFormDetails中检查接口响应的有效性，遇到无效用户ID或HTTP错误时主动抛出异常，让请求进入rejected分支：

export const loadFormDetails = createAsyncThunk("/form/details", async(userId)=>{
    if (!userId) {
      throw new Error("无效的用户ID");
    }
    const response = await fetch(`${baseUrl}/form/formdetails/${userId}`);
    // 检查HTTP响应状态
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || "接口请求失败");
    }
    const data = await response.json();
    console.log(data);
    return data
})

2. 完善extraReducers的状态更新 #

在rejected分支重置loading状态，保留data为空数组，并存储错误信息：

const homepageSlice = createSlice({
    name:"homepage",
    initialState,
    reducers:{},
    extraReducers:{
        [loadFormDetails.pending]:(state)=>{
            state.loading=true;
            state.error = null; // 清除之前的错误
        },
        [loadFormDetails.fulfilled]:(state, action)=>{
            state.loading=false;
            state.data=action.payload;
            state.error = null;
        },
        [loadFormDetails.rejected]:(state, action)=>{
            state.loading=false;
            state.error=action.error.message;
            // 保留初始空数组，避免map报错
            state.data = [];
        }
    }
})

3. 组件中增加数据有效性判断 #

在FormBody中确保data是数组后再执行map，避免报错：

const FormBody = () => {
    const {data, loading, error} = useSelector((store) => store.homepageDetails)
    console.log(data);

    if (loading) {
        return <div>Loading</div>;
    }
    if (error) {
        return <div>加载失败：{error}</div>;
    }
    // 确保data是数组
    if (!Array.isArray(data)) {
        return <div>数据格式错误</div>;
    }
    return (
        <div className=' flex flex-wrap'>
            {data.map((formdetail, index) => (
                <FormItem key={formdetail._id} {...formdetail} />
            ))}
        </div>
    )
}

4. 优化请求触发逻辑 #

在Homepage中确保userid存在后再发送请求，避免无效请求：

useEffect(() => {
    const userId = localStorage.getItem("userid");
    if (userId) {
        dispatch(loadFormDetails(userId));
    }
}, [dispatch])

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