为什么我的状态没有在 reactjs 中正确呈现？

Question

在我的项目中，我将 ReactJS 与 redux 和 firebase 结合使用。创建一个 thunk 以对 firebase 进行异步调用并将数据存储在 redux 中。

当我从 firebase 存储中获取我的文件时。使用此方法：

try {
  let list = [];
  await storage
    .ref()
    .child(path)
    .listAll()
    .then((res) => {
      res.items.forEach((item) => {
        storage
          .ref()
          .child(item.fullPath)
          .getDownloadURL()
          .then((urlRes) => {
            list.push({
              name: item.name,
              url: urlRes,
            });
          });
      });
    });

  dispatch(getFileActionSuccess(list));

此方法按预期工作。它 returns 一个文件数组，其中包含 url 到 view/download 它们。问题是当我尝试在我的状态下访问这个对象时，它 returns 是一个空数组。尽管在使用 Redux Devtools 检查时，我可以清楚地看到列表被发送后。我可以看到正确的数据。

Devtools image

注意：这不是真正的代码，而是一个表示

function page() {
  getFiles();


 <filesList/>
 }



function filesList() {
  const files = useSelector((state) => state.files, _.isEqual);

  console.log(files);
 return (..insert render..);
}

但是当logging文件。它首先显示一个空数组。但是当展开它时，它会显示正确的数据。但它不会渲染它。由于我不明白为什么它没有像预期的那样显示，我不再知道该怎么做以及如何解决这个问题。

Answer 1

只需获取有关组件安装和组件更新的数据，并相应地更新您的状态。

如果你正在使用 React Hooks，你可以使用 React.useState() 并给它一个依赖。在这种情况下，依赖项将是您的状态的一部分，它将在您的 HTTP 请求完成时更新。

为什么我的状态没有在 reactjs 中正确呈现？

Why is my state not properly rendered in reactjs?

reactjs

redux

firebase-storage