刷新页面时，redux 存储中的数据返回未定义

Question

当我访问 FeedbackDetails 页面时，最初没有问题，因为从上一页（主页）加载的状态仍然可用。但是当我尝试刷新页面时，它返回一个错误：TypeError：无法解构“反馈”的属性“标题”，因为它未定义。

以下是代码：-

首页

import React, { useEffect } from "react";
import Header from "../components/Home/Header/Header";
import Main from "../components/Home/Main/Main";
import { useDispatch } from "react-redux";
import { fetchData, updateData } from "../actions/dataActions";

const Home = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem("data"));

    if (!data) {
      dispatch(fetchData());
    }

    dispatch(updateData(data));
  }, [dispatch]);

  return (
    <StyledContainer>
      <Header />
      <Main />
    </StyledContainer>
  );
};

........

反馈详情页面

mport React, { useEffect } from "react";
import styled from "styled-components";
import Feedback from "../components/Home/Main/Feedback";
import Comments from "../components/FeedbackDetails/Comments";
import AddComment from "../components/FeedbackDetails/AddComment";
import { useParams, useHistory } from "react-router-dom";
import { totalComments } from "../utils/utilityFunctions";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { updateData } from "../actions/dataActions";

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

  useEffect(() => {
    const storagedata = JSON.parse(localStorage.getItem("data"));
    dispatch(updateData(storagedata));

    window.scrollTo({
      top: 0,
    });
  }, [dispatch]);

  const data = useSelector((state) => state.data);
  const productRequests = data.productRequests;
  const feedback = productRequests.filter((item) => item.id === Number(id))[0];
  const { title, category, upvotes, description, comments } = feedback;

.............
}

数据操作

export const updateData = (data) => async (dispatch) => {
  dispatch({
    type: "UPDATE_DATA",
    payload: {
      currentUser: data.currentUser,
      productRequests: data.productRequests,
    },
  });
};

数据缩减器

const initialState = {
  currentUser: {},
  productRequests: [],
  category: "",
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_DATA":
      return {
        ...state,
        currentUser: action.payload.currentUser,
        productRequests: action.payload.productRequests,
      };

    case "FILTER_DATA":
      return {
        ...state,
        currentUser: action.payload.currentUser,
        productRequests: action.payload.productRequests,
        category: action.payload.category,
      };

    case "UPDATE_DATA":
      return {
        ...state,
        currentUser: action.payload.currentUser,
        productRequests: action.payload.productRequests,
      };

    default:
      return { ...state };
  }
};
..............

减速机索引

import { combineReducers } from "redux";
import dataReducer from "./dataReducer";

const rootReducer = combineReducers({
  data: dataReducer,
});

export default rootReducer;

我尝试更深入地研究问题，发现 FeedbackDetails 页面中的 data （来自 redux 存储）在刷新时未定义。我认为当我调度 updateData(storagedata) 时，我的 useEffect 代码应该解决这个问题，但事实似乎并非如此。看来调度的更新速度并不比页面加载速度快。

如何解决这个问题？

Answer 1

正如hisam所指出的，我设法根据建议的线程找到了一个可行的解决方案。

对于任何感兴趣的人，我所做的是，我在 dataReducer 中更改了初始状态，如下所示：-

const storagedata = JSON.parse(localStorage.getItem("data"));

const initialState = {
  currentUser: storagedata.currentUser || {},
  productRequests: storagedata.productRequests || [],
  category: "",
};

它使 redux 存储保持水分，并防止持续存在的“未定义”问题。我还尝试使用 redux-persist 库，但不知何故我无法让它按预期工作。因此，我选择了上述解决方案。