我想把所有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 => {});
}
在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>
);
}
}
}
您必须返回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>
)
}
你正在将一个组件和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