如何在屏幕上列出 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&nbsp;[fileURL,&nbsp;setFileURL]&nbsp;=&nbsp;useState([]);然后确保将所有文件的元数据添加到数组中。如今，执行此操作的常见方法是：setFileName([...fileName,&nbsp;meta]);