為什么我的反應映射數組閃爍然后消失？

Question

我正在使用下面的 function 檢索包含我的 Firestore 存儲文件信息的對象數組

export const listFiles = async () => {
  const listRef = ref(storage, "/");
  const files: any = [];
  await listAll(listRef)
    .then((res) => {
      res.items.forEach((itemRef) => {
        getMetadata(itemRef).then((metadata) => {
          files.push({
            name: metadata.fullPath,
            created: metadata.timeCreated,
          });
        });
      });
    })
    .catch((error) => console.error(error));

  return files;
};

in my react front end i call the function the firestore function and set a files state variable equal to the result of the function using code below

const [files, setFiles] = useState<any | any>(null);
...
  useEffect(() => {
    const fetch = async () => {
      const filesList: any = await listFiles();
      setFiles(filesList)
    };
    fetch();
  }, []);

然后我在下面的代碼中返回的數組上使用 map（順便說一句，使用脈輪 ui 組件）

<Box textAlign="center">
        {files && (
          <>
            <Text fontSize="3xl">Uploaded Files</Text>
            {files.map((file: any) => {
              return (
                <Box
                  display="flex"
                  alignItems="center"
                  key={file.name}
                  bg="gray.200"
                  m={5}
                  borderRadius="lg"
                  p="2"
                  justifyContent="space-between"
                >
                  <Box textAlign="initial">
                    <Text>{file.name}</Text>
                    <Text>{file.created}</Text>
                  </Box>
                  <Button>
                    <BsCloudDownload />
                  </Button>
                </Box>
              );
            })}
          </>
        )}
      </Box>

任何想法為什么我的內容出現一秒鍾然后消失？ 我在其他帖子中看到過其他類似問題的人，但無法用我看到的任何解決方案來解決。 可能是某個地方的愚蠢錯誤，讓我知道

再次感謝

編輯：我從我的 firestore 查詢中刪除了 try catch .. 讓我知道這看起來是否正確？

export const listTheFiles = async () => {
  const listRef = ref(storage);
  const files: any = [];
  const response = await listAll(listRef);
  response.items.forEach(async (itemRef) => {
    const metadata = await getMetadata(itemRef);
    files.push({ name: metadata.fullPath, created: metadata.timeCreated });
  });
  console.log(files);
  return files;
};

Answer 1

您可以嘗試像這樣編寫組件，看看問題是否仍然存在：

 <Box textAlign="center"> <Text fontSize="3xl">Uploaded Files</Text> { files?.map((file) => { return ( <Box display="flex" alignItems="center" key={file.name} bg="gray.200" m={5} borderRadius="lg" p="2" justifyContent="space-between" > <Box textAlign="initial"> <Text>{file.name}</Text> <Text>{file.created}</Text> </Box> <Button> <BsCloudDownload /> </Button> </Box> ); }) } </Box>

了解您的控制台中是否出現任何類型的錯誤也會很有幫助。

Answer 2

問題是由於listFiles function 中的承諾未正確處理，因此files作為空數組返回，即使將來會填充此數組 - react 不會檢測到並且不會重新渲染組件。 此外，將async與.then.catch 承諾 api 混合是一種不好的做法。

固定方法：

export const listFiles = async () => {
  const listRef = ref(storage, "/");
  const listAllResult = await listAll(listRef);

  const promises = listAllResult.items.map(async (itemRef) => {
    const metadata = await getMetadata(itemRef);
    return {
      name: metadata.fullPath,
      created: metadata.timeCreated
    };
  });

  return Promise.all(promises);
};

抱歉，我目前無法對其進行測試，但如果您在此之后遇到任何問題 - 請隨時評論我，我會更新答案。