[英]Reactjs return App after fetching data with Firestore
I want to return my app as soon as data has been fetched.我想在获取数据后立即返回我的应用程序。 As long as it hasn't been, I want to display a black screen.只要还没有,我就想显示黑屏。 Therefore I tried to return JSX after fetching the data, but I get the following error:因此,我尝试在获取数据后返回 JSX,但出现以下错误:
Functions are not valid as a React child.函数作为 React 子节点无效。 This may happen if you return a Component instead of from render.如果您返回 Component 而不是从 render 返回,则可能会发生这种情况。 Or maybe you meant to call this function rather than return it.或者,您可能打算调用此函数而不是返回它。
function App() {
return firebase.firestore().collection('projects').onSnapshot(snap => {
let projects = [];
snap.forEach(doc => {
projects.push(doc.data())
});
return (
<div className="App">
<Router history={history}>
<ScrollToTop>
<Header/>
<Route path="/project/:name" component={Project}/>
<Route path="/about" component={About}/>
<div className="hs">
<Route path={["/", "/project/:name"]} exact component={() => <CartHolder projects={projects}/>}/>
</div>
<div className="hs-mobile">
<Route path="/" exact component={CartHolderMobile}/>
</div>
</ScrollToTop>
</Router>
</div>
);
});
}
What's the best way to do so?这样做的最佳方法是什么?
You will have to return <BlackScreen>
until your api gives you a response.你必须返回<BlackScreen>
直到你的 api 给你一个响应。 In addition to that在此之上
You will have to use useEffect.您将不得不使用 useEffect。 Please refer the similar answer here请参考这里的类似答案
function App() {
const [projects, setProjects] = useState([]);
useEffect(() => {
if (!projects) {
getProjects(); //Your firebase call to get projects
}
}, []);
const getProjects = async () => {
//call firebase and get the projects
setProjects(projects)
}
return projects ? (
<div className="App">
<Router history={history}>
<ScrollToTop>
<Header/>
<Route path="/project/:name" component={Project}/>
<Route path="/about" component={About}/>
<div className="hs">
<Route path={["/", "/project/:name"]} exact component={() => <CartHolder projects={projects}/>}/>
</div>
<div className="hs-mobile">
<Route path="/" exact component={CartHolderMobile}/>
</div>
</ScrollToTop>
</Router>
</div>
) : (
<BlackScreen />
)
}
Your component needs to return something in the render method so display your app conditionally.您的组件需要在 render 方法中返回一些内容,以便有条件地显示您的应用程序。 Something like:就像是:
function App() {
const projects = firebase.firestore().collection('projects').onSnapshot(snap => {
let projects = [];
snap.forEach(doc => {
projects.push(doc.data())
});
return projects;
})
render() {
{!projects && return <BlackScreen />}
{projects &&
<div className="App">
<Router history={history}>
<ScrollToTop>
<Header/>
<Route path="/project/:name" component={Project}/>
<Route path="/about" component={About}/>
<div className="hs">
<Route path={["/", "/project/:name"]} exact component={() => <CartHolder projects={projects}/>}/>
</div>
<div className="hs-mobile">
<Route path="/" exact component={CartHolderMobile}/>
</div>
</ScrollToTop>
</Router>
</div>
);
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.