0

这是代码：

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：无法读取未定义的属性“行”

错误页面

4

2 回答 2

0

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

于 2020-10-02T17:17:23.750 回答
0

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

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

于 2020-10-02T18:14:30.923 回答