javascript - Home(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Question

我想把所有东西都documents存储在firebase中。如果有超过 0 个文档，则 render 1，否则打印no doc found但是这给了我错误：

render() {
    firebase
      .firestore()
      .collection("users")
      .doc(localStorage.getItem("ph"))
      .collection("chat")
      .get()
      .then(d => {
        this.dt = d.docs.length;
        if (this.dt > 0) {
          return <div>1</div>;
        } else {
          return (
            <div>
              <div className="app-noFoundArea">
                <img src={noFound} />
              </div>
              <div className="app-noFound-title">
                <p>
                  No chat found. Try create using{" "}
                  <button className="app-add-icon app-nofound">
                    <i className="material-icons">add</i>
                  </button>
                </p>
              </div>
            </div>
          );
        }
      })
      .catch(e => {});
  }

标签： javascriptreactjs

Answer 1

获取数据可能不是一个好主意render，因为每次更新state或props更新时都会发生这种情况。它也是异步的，因此 React 实际上不会返回任何内容来渲染。

你最好把firebase逻辑放在componentDidMount：

class MyComponent extends React.Component {
  state = { loaded: false, docs: [] };

  componentDidMount() {
    firebase
      .firestore()
      .collection("users")
      .doc(localStorage.getItem("ph"))
      .collection("chat")
      .get()
      .then(d => {
        this.setState({ loaded: true, docs: d });
      })
      .catch(e => {
        this.setState({ loaded: true });
      });
  }

  render() {
    const { loaded, docs } = this.state;

    if (!loaded) {
      return null;
    }

    if (docs.length > 0) {
      return <div>1</div>;
    } else {
      return (
        <div>
          <div className="app-noFoundArea">
            <img src={noFound} />
          </div>
          <div className="app-noFound-title">
            <p>
              No chat found. Try create using{" "}
              <button className="app-add-icon app-nofound">
                <i className="material-icons">add</i>
              </button>
            </p>
          </div>
        </div>
      );
    }
  }
}