如何在屏幕上列出 firebase 存储的所有文件

Question

所以，我想显示我的 firebase 存储中的所有文件，但我做不到。我试图将它推入一个数组，但只得到一个文件名。我不知道如何将所有文件推送到fileName数组中。function Home() {  const [fileURL, setFileURL] = useState(null);  const [fileName, setFileName] = useState([{name: "" }]);  function getMetaData(itemRef) {    itemRef.getMetadata().then((meta) => {      setFileName(meta);    });  }  useEffect(() => {    function getFiles() {      const storage = firebase.storage().ref("/recursos");      storage.listAll().then((res) => {        res.items.forEach((itemRef) => {          getMetaData(itemRef);        });      });    }    getFiles();  }, []);  return (    <div className="home">      <SinapseNav />      <Container className="d-flex align-items-center justify-content-center mt-4 mb-4">        <Card>          <Card.Body>            <h3 className="text-center mb-4">Pesquisar Recursos</h3>            {<div>{fileName.name}</div>}            <Form.Control placeholder='Ex: "Trigonometria"' />          </Card.Body>        </Card>      </Container>    </div>  );}

Answer 1

现在在您的代码中，您将获取每个文件的元数据，然后每次调用：

setFileName(meta);

这意味着每个文件的元数据将替换您之前任何文件的元数据。

为了使代码正常工作，您需要将文件的元数据存储为数组：

const [fileURL, setFileURL] = useState([]);

然后确保将所有文件的元数据添加到数组中。如今，执行此操作的常见方法是：

setFileName([...fileName, meta]);