使用Zustand状态管理时切换编辑记录的旧数据残留问题求助

问题分析 #

路由参数id变化时，Zustand存储的旧数据未及时清除，异步请求完成前子组件仍显示旧内容，核心原因是状态未在新数据加载前重置，且页面切换后旧状态未被清理。

解决方案 #

1. 加载新数据前重置状态 #

发起异步请求前先清空旧数据，避免子组件显示过期内容：

const { id } = useParams<string>();
const setData1 = useStore((state) => state.setData1)
const setData2 = useStore((state) => state.setData2)

React.useEffect(() => {
    async function fetchData() {
      // 先重置旧数据
      setData1('');
      setData2([]);
      // 发起请求获取新数据
      const response = await getExampleData(id);
      setData1(response.name);
      setData2(response.values);
    }
    fetchData();
  }, [id, setData1, setData2]);

2. 封装Store重置方法并清理页面状态 #

在Zustand Store中添加重置方法，同时在组件卸载时清理状态，避免影响其他页面：

第一步：更新Zustand Store

import { create } from 'zustand';

const useStore = create((set) => ({
  data1: '',
  data2: [],
  setData1: (val) => set({ data1: val }),
  setData2: (val) => set({ data2: val }),
  // 封装重置状态的方法
  resetFormData: () => set({ data1: '', data2: [] }),
}));

export default useStore;

第二步：在主组件中使用重置方法

const { id } = useParams<string>();
const setData1 = useStore((state) => state.setData1)
const setData2 = useStore((state) => state.setData2)
const resetFormData = useStore((state) => state.resetFormData)

React.useEffect(() => {
    async function fetchData() {
      // 加载新数据前重置状态
      resetFormData();
      const response = await getExampleData(id);
      setData1(response.name);
      setData2(response.values);
    }
    fetchData();

    // 组件卸载时重置状态，避免污染其他页面
    return () => resetFormData();
  }, [id, setData1, setData2, resetFormData]);

3. 增加加载状态优化用户体验 #

在Store中加入加载状态，让子组件在数据加载时显示提示，彻底避免旧数据干扰：

更新Store：

const useStore = create((set) => ({
  data1: '',
  data2: [],
  isLoading: false,
  setData1: (val) => set({ data1: val }),
  setData2: (val) => set({ data2: val }),
  setIsLoading: (val) => set({ isLoading: val }),
  resetFormData: () => set({ data1: '', data2: [], isLoading: false }),
}));

主组件处理加载状态：

const { id } = useParams<string>();
const setData1 = useStore((state) => state.setData1)
const setData2 = useStore((state) => state.setData2)
const resetFormData = useStore((state) => state.resetFormData)
const setIsLoading = useStore((state) => state.setIsLoading)

React.useEffect(() => {
    async function fetchData() {
      resetFormData();
      setIsLoading(true);
      try {
        const response = await getExampleData(id);
        setData1(response.name);
        setData2(response.values);
      } catch (error) {
        // 处理请求错误
        console.error('加载数据失败:', error);
      } finally {
        setIsLoading(false);
      }
    }
    fetchData();
    return () => resetFormData();
  }, [id, setData1, setData2, resetFormData, setIsLoading]);

子组件使用加载状态：

const data1 = useStore((state) => state.data1)
const isLoading = useStore((state) => state.isLoading)

return (
  <div>
    {isLoading ? <p>加载中...</p> : <input value={data1} onChange={(e) => {/* 编辑逻辑 */}} />}
  </div>
)

额外注意事项 #

• 若子组件用了React.memo优化，需把Zustand中用到的状态作为依赖传递，或直接在组件内部通过useStore获取数据，保证状态变化时组件能重新渲染。
• 异步请求需做好错误处理，避免请求失败后状态一直停留在加载中。

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