React + Redux 状态在页面刷新时被删除答案

【问题标题】：React + Redux state deleted on page refreshReact + Redux 状态在页面刷新时被删除
【发布时间】：2020-09-21 15:29:35
【问题描述】：

我目前有一个组件可以从后端提取一副卡片，并尝试从这些卡片的值中创建一个图表。在第一次加载时，一切正常并且图表填充。然而，在刷新时，decks 属性似乎是未定义的（尽管 redux devtools 显示它仍然存在）。

使用效果：

useEffect(() => {
  getDecks();                      // sets "decks"
  populateData();
}, []);

  const populateData = () => {
    var data = [0, 0, 0, 0, 0];
    cardArray = decks[0].cards;                // crashes here on reload; decks is undef.

    ...
    createChart(data);
  };

export const getDecks = () => async (dispatch) => {
  try {
    const res = await axios.get("/api/decks");
    dispatch({
      type: GET_DECKS,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: DECK_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};

甲板减速器的初始状态：

const initialState = {
  decks: [],
  currentCard: 0,
  loading: true,
  error: {},
  isFlipped: false,
};

我看过类似的帖子，这些帖子建议我将卡片组存储在本地存储中，但我还有其他调用 getDecks 的组件显示来自它们的数据，与此类似，没有任何问题。有没有人有任何提示或可能的原因为什么会这样做？谢谢。

【问题讨论】：

每次刷新页面时，一旦组件加载完毕，就会调用 useEffect() 挂钩。结果，你的 redux 状态被设置回它们的初始状态，直到某些东西导致这个状态改变。如果有什么东西阻止这个初始状态恢复decks 的新值，那么它将保持未定义。您能否提供更多关于 getDecks() 调用您的套牌的内容或方式的想法，或者可以在这里分享？
如果您想知道如何共享您的代码，您必须编辑您的帖子并将其添加到那里。
我更新了帖子！ getDecks() 只是向我的后端发出一个 get 请求，该请求发回一个包含一组卡组（用于多个卡组）的卡组对象，并将其分配给 redux 存储中的decks。 decks 中的每个卡片组都有一个名为 cards 的数组，用于保存卡片对象。
在调用useEffect()的组件内部，你收到decks props了吗？
你能分享你初始化卡组状态的代码吗？

标签： reactjs redux react-redux use-effect

【解决方案1】：

尝试这样做，看看它是否有效。调用useEffect() 的组件应该如下所示：

import PropTypes from "prop-types";
import { connect } from "react-redux";
const deckComponent = ({decks}) => {
useEffect(() => {
  getDecks();                 
}, []);
useEffect(() => {                
  populateData();
}, [decks]);

// rest of the component goes here
 return(
.............
    );
};


deckComponent.propTypes = {
  decks: PropTypes.object.isRequired,
  getDecks: PropTypes.func.isRequired,
};
const mapStateToProps = (state) => ({
  decks: state.decks,
});

export default connect(mapStateToProps, {
  getDecks,
})(deckComponent);

这样做的目的是，每当加载您的组件时，都会调用 getDecks() 函数以使后端 decks 状态发生变化。第二个 useEffect 在 redux 存储上监视此更改并调用 populateData()。

【讨论】：

不幸的是，这似乎并没有为我解决这个问题。 populateData() 似乎仍然认为 decks 未定义。我想知道这是否是 getDecks() 没有及时设置状态以便 populateData() 读取它的问题？（因为 getDecks() 是异步的）。我很困惑，如果是这种情况，为什么它只会在页面重新加载时一直崩溃。

【解决方案2】：

发现问题。 redux 存储在刷新时消失显然很常见，因此将您的应用程序包装在持久存储中（例如 redux-persist）会自动为我解决问题。谢谢大家的建议。

【讨论】：