React页面刷新时Redux store返回undefined导致解构报错怎么解决？

问题根本原因 #

React 组件的渲染逻辑执行优先级高于 useEffect 回调，你在 useEffect 里触发的 store 更新动作，赶不上首次渲染的执行时机。首次渲染时 Redux 里的 productRequests 还是初始值空数组，filter 操作后返回空数组，取第0位就是 undefined，解构自然报错。
另外你写的 updateData 是异步 action（加了不必要的 async 关键字），也会进一步拉长 store 更新的耗时，放大这个问题。

解决方案 #

1. 移除不必要的异步声明 #

你的 updateData 只是同步更新本地 store，不需要异步逻辑，直接改成同步 thunk 即可，顺便加兜底判断避免 localStorage 为空时报错：

// 修改数据Actions里的updateData
export const updateData = (data) => (dispatch) => {
  const payload = data || { currentUser: {}, productRequests: [] }
  dispatch({
    type: "UPDATE_DATA",
    payload: {
      currentUser: payload.currentUser,
      productRequests: payload.productRequests,
    },
  });
};

2. 组件渲染前加数据校验 #

在 FeedbackDetails 页面拿到 store 数据后，先判断数据是否就绪，未就绪时渲染加载占位符，避免执行后续的解构逻辑：

const FeedbackDetails = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const { id } = useParams();

  useEffect(() => {
    const storagedata = JSON.parse(localStorage.getItem("data"));
    dispatch(updateData(storagedata));
    window.scrollTo({ top: 0 });
  }, [dispatch]);

  const data = useSelector((state) => state.data);
  // 数据未就绪时渲染加载态
  if (!data?.productRequests?.length) {
    return <div>数据加载中...</div>
  }

  // 用find替代filter，直接拿到匹配项，不需要取[0]，性能更好
  const feedback = data.productRequests.find((item) => item.id === Number(id));
  // 找不到对应反馈时的兜底逻辑
  if (!feedback) {
    // 可以选择显示错误提示，也可以直接跳回首页
    // history.push('/')
    return <div>未找到对应的反馈内容</div>
  }

  // 确认feedback存在后再解构
  const { title, category, upvotes, description, comments } = feedback;

  // 后续原有业务逻辑
  // .............
}

可选优化 #

如果要彻底避免首次进入页面的加载闪烁，可以把初始化 store 逻辑提前到路由守卫、或者应用根组件的 useEffect 里，不要分散在各个页面单独处理。

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