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

Question

在第一次渲染中获取未定义的数据时，我们使用短路 && 运算符，例如 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) 等等。

如您所见，第一个循环取决于获取数据(data)，第二个循环取决于第二个循环(allUser)。所以你必须链式检查 it.I 知道你可以在组合映射和过滤器中得到它，但假设你需要这样做。

Answer 1

您可以使用 optional chaining，它在主要的 React 启动器（CRA、Gatsby、Next.js）中开箱即用。

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

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

Is there a simplified way of checking if the data renders?

javascript

operators

reactjs