页面重载后如何调用useEffect？重载后useState无法获取Redux状态数据

数据老陈

2026-8-17

问题原因与解决方案

核心问题

useState初始值仅生效一次：useState(newState)只会在组件首次渲染时将newState设为初始值，后续Redux store更新导致newState变化时，组件本地的data状态不会自动同步。
异步数据时机不匹配：组件挂载时调用的getDatashow()是异步操作，初始渲染时Redux中的User数据还未加载完成，此时newState为空数组，data也被初始化为空；后续数据加载完成后，newState更新但data未随之更新。

解决方法

方法一：直接使用Redux状态（推荐）

既然已经通过useSelector获取了Redux中的状态，无需再用组件本地useState复制一份，直接使用newState即可：

const DataShow= ({getDatashow}) => {
  const newState = useSelector((state) => state?.User);
  
  useEffect(() => {
    getDatashow()
  }, []);

  // 直接使用newState进行渲染
  return (
    <>
      {/* 这里渲染newState的内容 */}
    </>
  )
}

function mapDispatchToProps(dispatch) {
  return {
    getDatashow: ()=> dispatch(getDatashow())
  };
}

export default connect(null, mapDispatchToProps)(DataShow);

方法二：同步Redux状态到组件本地state（仅业务需要时使用）

如果必须将Redux数据存入组件本地state，需添加useEffect监听newState的变化，实时更新data：

const DataShow= ({getDatashow}) => {
  const newState = useSelector((state) => state?.User);
  const [data, setData] = useState(newState);

  // 监听newState变化，同步更新本地state
  useEffect(() => {
    setData(newState);
  }, [newState]);

  useEffect(() => {
    getDatashow()
  }, []);

  return (
    <>
      {/* 这里渲染data的内容 */}
    </>
  )
}

function mapDispatchToProps(dispatch) {
  return {
    getDatashow: ()=> dispatch(getDatashow())
  };
}

export default connect(null, mapDispatchToProps)(DataShow);