如何在屏幕上列出所有 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]);