分别处理加载和无内容

Question

在我的应用程序中，我从 API 获取内容。我可以显示内容并显示加载器图标，直到内容未加载。但是如果没有任何内容，页面会显示加载器图标，这是意外的。如果根本没有内容，则预期的功能是不显示可用的内容。

render() {
    const { logs } = this.state;
    if (logs.size === undefined) {
      return <div>No Logs</div>;
    } else if (isEmpty(logs)) {
      return (
        <div className="earth-spinning">
          <img src={EarthSpinning} alt="spinner" style={{ margin: "0 auto" }} />
        </div>
      );
    } else {
      return (
        <div>
          <h2>Logs</h2>
          <button onClick={() => this.props.deleteLogs()}>
            Delete All Logs
          </button>
          <ul className="list-group">
            {this.renderLogs()}
            {this.state.show ? this.props.dialog : null}
          </ul>
        </div>
      );
    }
  }

这是我得到的数据

Answer 1

让 API 返回 Promise 非常好，这样您就可以在它们完成时做出响应

这个例子假设你会做你的 API 调用，数据会去一个商店，然后进入道具

...

getInitialState() {
    return {
        loading: true
    };
}

componentWillMount() {
   this.props.requestLogs()
       .then(() => this.setState({ loading: false });
}

render() {
    if (this.state.loading) {
        return this.renderLoading();
    }

    if (this.props.logs.length === 0) {
        return this.renderEmptyView();
    }

    return this.renderStuff();
}