重新加载页面时丢失道具状态数据答案

【问题标题】：Losing props state data when reloading the page重新加载页面时丢失道具状态数据
【发布时间】：2020-10-02 17:06:54
【问题描述】：

代码如下：

const mapStateToProps = (state, ownProps) => {
  const id = ownProps.match.params.id;
  const sheets = state.firestore.data.sheets;
  const sheet = sheets && sheets[id];
  const rows = sheet.rows;

  return {
    rows: rows,
  };
};

export default compose(
  firestoreConnect(() => ["sheets"]),
  connect(mapStateToProps)
)(Table);

数据结构：

sheets:[
  filename:'abc.txt',
  rows:[ {somedata} , {somedata} ]
]

在加载页面时，我可以加载行，但在重新加载时，我会丢失状态数据。这是错误：

TypeError：无法读取未定义的属性“行”

errorpage

【问题讨论】：

可能是在 redux 数据准备好之前调用了 mapStateToProps 函数，因此您的嵌套搜索会触发“无法读取...未定义”错误。您在哪里提出数据请求？

标签： reactjs redux mapstatetoprops

【解决方案1】：

由于您使用的是 redux，因此有一个包可以帮助您将数据持久保存在本地存储中，它称为 redux-persist。即使刷新/关闭页面，你也会有你的状态

【讨论】：

【解决方案2】：

如果您认为使用 redux-persist 对您的项目来说太过分了，那么一种方法可能是以下。在您的 reducer 中，您可以设置初始状态，使其在本地存储中查找特定数据。

const INIT_STATE = { pieceOfData: JSON.parse(localStorage.getItem("pieceOfData")) }

第一次获取该数据时，它将为空。在你的 reducer 中，你不会有正常的状态更新。

case SET_DATA: { return {...state, pieceOfData: action.payload } }

在你的动作调度器中，当你获取数据时，将其写入 LS 并调度相应的动作以更新 redux 存储：

localStorage.setItem("pieceOfData", JSON.stringify(pieceOfData));
dispatch({type: SET_DATA, payload: pieceOfData});

当您需要从 redux 存储访问该数据时：

const TestComponent = () => {
    const {pieceOfData} = useSelector((state) => state);
    
    return (
        {/*  Remember to check if pieceOfData is already available  */}
        pieceOfData
        ? <p> { pieceOfData.field } </p>
        : <Loader />
    )
}

我不建议在大型项目中使用这种方法；在这种情况下，请查看 redux-persist 等插件。

【讨论】：