javascript - 等待数组被填充，然后渲染这些组件

Question

我正在通过 Firebase 存储获取目录列表，完成后返回要渲染的 Project 组件列表，每个组件都具有之前检索到的名称。如何首先等待获取完成，然后返回相同数量的 Project 组件？

这是我尝试过的:

import React, {useState} from "react"
import "./index.css"
import {hot} from "react-hot-loader"
import Project from "./Project"
import firebase from "./Firebase.js"

function Projects(props){

    // Get refereance to firebase storage
    let storage = firebase.storage();
    // Reference the main projects folder
    let storageRef = storage.ref().child('projects');
    // Store all project names from firebase storage to then return them as Project components
    let projects = []

    // This lists the directories in 'Projects'
    storageRef.listAll().then(res => {
        // For each directory, push the name into the projects array
        res.prefixes.forEach((folderRef) => {
            projects.push(folderRef.name)
        })
    }).catch(error => {
            console.log(error)
    })

    return(
        <div>
            {projects.map(projName => (
                <>
                    <Project project={projName}/>
                </>

            ))}
        </div>
    )




}

export default hot(module)(Projects)

但是，当返回 projects 时，它是空的，因为它还没有等待上面的 forEach 完成。另外，我认为 projects.map() 中的 return 语句不起作用。我尝试过 Promise 和 Async Await，但不确定如何构建它。

Answer 1

与类组件类似，您需要在功能组件中使用 useState Hook 来定义您的状态。

此外，您应该使用 useEffect 钩子(Hook)来处理 HTTP 请求的执行，这样就不会在每次重新渲染时触发它。我们添加了一个空数组 ([]) 作为 useEffect 钩子(Hook)的第二个参数，这样它只会运行一次，如官方 React 钩子(Hook) documentation 中所述。

返回响应后，我们通过调用 setProjects() 更新状态。

function Projects(props){
  const [ projects, setProjects ] = useState([]);
  let storage = firebase.storage();
  let storageRef = storage.ref().child('projects');

  useEffect(() => {
    const response = []
    storageRef.listAll().then(res => {
    // For each directory, push the name into the projects array
      res.prefixes.forEach((folderRef) => {
        response.push(folderRef.name)
      })
      setProjects(response);
    }).catch(error => {
        console.log(error)
    })
  }, [])

  return(
    <div>
        {projects.length && projects.map((projName, index) => (               
           <Project project={projName} key={index} />
        ))}
    </div>
   )
}

export default hot(module)(Projects)