Redux Toolkit异步获取购物车数据时，如何保留旧值避免显示NaN

要解决异步请求间隙显示NaN的问题，核心是不让state里的totalItems在请求过程中被置为无效值，同时可在组件层面做兜底处理，具体分两种场景实现：

1. 在Redux Toolkit Slice中控制状态更新逻辑 #

这是最根本的解决方式，确保异步请求的不同阶段（pending/fulfilled/rejected）都不会把totalItems改成NaN：

示例Slice代码 #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 异步获取购物车数据的thunk
export const fetchCartData = createAsyncThunk(
  'cart/fetchCartData',
  async () => {
    const response = await fetch('/api/cart');
    return response.json(); // 假设返回的数据包含totalItems字段
  }
);

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    totalItems: 0, // 初始化给默认值，避免初始NaN
    status: 'idle', // idle/loading/succeeded/failed
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchCartData.pending, (state) => {
        state.status = 'loading';
        // 这里**不要修改totalItems**，保持当前旧值
      })
      .addCase(fetchCartData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        // 只有请求成功时，才用新值覆盖旧值，加兜底避免无效值
        state.totalItems = action.payload.totalItems ?? state.totalItems;
      })
      .addCase(fetchCartData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
        // 请求失败也不修改totalItems，保持旧值
      });
  }
});

export default cartSlice.reducer;

2. 组件层面兜底处理（可选，作为补充） #

如果不想修改slice逻辑，可以在组件里用useState缓存有效的totalItems值，只在新值有效时更新：

示例组件代码 #

import { useDispatch, useSelector } from 'react-redux';
import { fetchCartData } from './cartSlice';
import { useState, useEffect } from 'react';

function CartTotal() {
  const dispatch = useDispatch();
  const { totalItems } = useSelector((state: RootState) => state.cartState);
  // 用localState缓存有效数值
  const [displayTotal, setDisplayTotal] = useState(totalItems);

  useEffect(() => {
    // 只有当totalItems是有效数字时，才更新显示值
    if (!isNaN(totalItems) && typeof totalItems === 'number') {
      setDisplayTotal(totalItems);
    }
  }, [totalItems]);

  // 触发异步请求的逻辑，比如组件挂载时
  useEffect(() => {
    dispatch(fetchCartData());
  }, [dispatch]);

  return <div>购物车商品总数：{displayTotal}</div>;
}

关键注意点 #

• 永远不要在异步请求的pending阶段重置totalItems，除非你明确需要清空状态
• 初始化state时给totalItems设置合理默认值（比如0），避免首次渲染出现NaN
• 接口返回数据时做兜底判断，防止后端返回null/undefined导致state被污染

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