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

如何解决重新加载页面时丢失道具状态数据

代码如下：

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，因此有一个软件包可帮助您将数据持久存储在本地存储中，这称为redux-persist。即使刷新/关闭页面，您也可以保持状态

,

如果您认为使用redux-persist对于您的项目而言过于矫kill过正，则可以采用以下一种方法。 在化简器中，您可以设置初始状态，使其看起来像本地存储中的特定数据。

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

第一次获取数据将为空。 在减速器中，您将获得正常状态的更新。

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之类的插件。