在 React 中处理组件加载的最佳方式

Question

我有一个应用程序可以从 JSONPlaceholder 获取帖子。它有一个初始状态的帖子：[]。然后调用：

this.setState({posts})

如果我想在组件接收帖子之前呈现加载...，最好说：

if (!this.state.posts.length) // Do something

或者最好在初始状态添加 loading: true 然后说如果组件接收到数据没有错误:

if(!this.state.loading) // Do something

Answer 1

首先，正如评论所说，使用单个 boolean type state 比到处使用 changeable condition 更好。

如果你想加点loading animation，我试过Material-UI processing有时也很方便。

并且在这种情况下用法非常简单。添加一个conditional rendering就大功告成了

import { CircularProgress } from '@material-ui/core';
...
render() {
  const { loading } = this.state;
  return (
    ...
    {loading ? <CircularProgress /> : <YourComponent /> ... 
    ...
  )
}

在 React 中处理组件加载的最佳方式

Best way to handle component loading in react

loading

reactjs

axios

jsonplaceholder