Reactjs 在使用 Firestore 获取数据后返回 App答案

【问题标题】：Reactjs return App after fetching data with FirestoreReactjs 在使用 Firestore 获取数据后返回 App
【发布时间】：2020-04-26 10:14:19
【问题描述】：

我想在获取数据后立即返回我的应用程序。只要还没有，我想显示一个黑屏。因此，我尝试在获取数据后返回 JSX，但出现以下错误：

函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

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>
        );
    });
}

最好的方法是什么？

【问题讨论】：

您需要返回一个JSX 元素。另外：useEffect-reactjs.org/docs/hooks-reference.html#useeffect

标签： javascript reactjs

【解决方案1】：

您的组件需要在 render 方法中返回一些内容，以便有条件地显示您的应用程序。类似的东西：

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>
        );
    });
  }
}

【讨论】：

【解决方案2】：

您必须返回<BlackScreen>，直到您的 api 给您回复。除此之外

您必须使用 useEffect。请参考类似答案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 />
    )
}

【讨论】：