时间戳

首页 > 解决方案 > 是否有一种简化的方法来检查数据是否呈现？

javascript - 是否有一种简化的方法来检查数据是否呈现？

问题描述

当在第一次渲染时获取未定义的数据时，我们使用短路&&运算符，例如data && data.doSomething检查它是否已经渲染以便执行其他操作，我们会收到错误。

因此，如果您有 n 个取决于该数据的不同循环，这意味着您必须在循环之前检查它 n 次
示例：您可能会将该数据循环 3 次，因此您需要检查 3 次。 data && data.map data && data.reduce data && data.filter如果您还有依赖于该数据的组件，这有点重复data && <Component />

我尝试将数据放在 useEffect(setData) 上并从状态中获取数据，但您仍然需要检查它。

获取状态
data = useSelector(state => state.data)
第一个循环获取所有用户
const allUser = data && data.map.(data => data.user)
第二个循环过滤用户
const allAge = allUser && allUser.filter(user => user.age > 18) 等等。

如您所见，第一个循环取决于获取数据（数据），第二个循环取决于第二个循环（allUser）。所以你必须对它进行链式检查。我知道你可以在组合地图和过滤器中得到它，但假设你需要这样做。

标签： javascriptreactjsoperators

解决方案

您可以使用主要 React 启动器（CRA、Gatsby、Next.js）中开箱即用的可选链接。

const App = ({ data }) => {
  return (
    <>
      {data?.map()}
      {data?.reduce()}
      {data?.filter()}
      {!data && <LoadingComponent />}
    </>
  );
};

推荐阅读