时间戳

首页 > 解决方案 > react-admin 注销时出错

redux - react-admin 注销时出错

问题描述

当用户注销时，由于在您进入登录页面之前清除了 redux 存储，我们的组件中会出现许多错误。

我们有一些使用 useQueryWithStore 的组件。这是一个例子：

const { data, total, error, loaded } = useQueryWithStore({
  type: "getList",
  resource: "tasks",
  payload: {
    pagination: { page: 1, perPage: 5 },
    sort: { field: "date_end", order: "ASC" },
  },
});

然后我们在渲染组件之前检查数据是否加载并且没有错误。

return (
  {!loaded && !error ? (
    <Loading />
  ) : (
    ...our component rendering data...
  )
)

问题在于，当用户注销时，它首先会清除 redux 存储，然后才能导航到登录页面。这意味着两者!loaded和!error都是真实的，它会尝试渲染组件。但是因为redux store已经被清空了，data所以是未定义的。

你会如何处理这个最好的？

  1. 为数据添加默认值？-const {data = [], total, error, loaded}
  2. 检查数据是否未定义？-{!loaded && !error && data}
  3. 使用可选链接？- 任何引用都data可以使用可选链接 -data?.map(...map function...)
  4. 提出拉取请求以更改注销顺序？- 我们可以导航到登录页面或注销页面，然后清除 redux 存储，而不是先清除 redux。
  5. 我没有想到的更好的方法？

想法？

标签： reduxreact-hooksreact-admin

解决方案

推荐阅读