Question

我想将所有documents存储在Firebase中。如果文档多于0，则渲染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 => {});
  }

Answer 1

在except中获取数据可能不是一个好主意，因为每次更新render或state时都会发生。它也是异步的，因此实际上什么也不会返回以供React渲染。

最好将Firebase逻辑放在props中：

componentDidMount

Answer 2

您必须返回在firebase函数内部做出的响应。

render() {
return (
<div>
  {
    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}></img>
                  </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) => {
      })    
  }
</div>
 )
}

Answer 3

您正在将一个组件和JS代码混合在一起，如果它属于catch函数，那么它将不会返回任何内容。

React.Component中的render方法总是期望返回一个有效的HTML结构。

您可以尝试对代码进行以下修改

constructor(props) {
    super(props)
    this.state = {
     IsChatFound : false
    };
  }

  getChatInfo = () => {
   try{
        firebase.firestore().collection("users").doc(localStorage.getItem("ph")).collection("chat").get()
        .then((d) => {
            this.setState({IsChatFound :(d.docs && d.docs.length > 0)}); 
        });
    }
    catch(error){
      this.setState({IsChatFound : false}); 
    }
  }

  componentDidMount =()=>{
    this.getChatInfo();
  }


  render() {
    return (
        {this.state.IsChatFound ?
            <div>1</div>
        : <div>
            <div className="app-noFoundArea">
                <img src={noFound}></img>
            </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>
        }
    )         
 }

您现在看到render()方法总是返回HTML

Home（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

3 个答案: