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

【问题标题】：Why is my state not properly rendered in reactjs?为什么我的状态没有在 reactjs 中正确呈现？
【发布时间】：2021-10-20 03:19:23
【问题描述】：

在我的项目中，我将 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));

此方法按预期工作。它返回一组文件及其 url 以查看/下载它们。问题是当我尝试在我的状态下访问这个对象时，它返回一个空数组。即使在使用 Redux Devtools 检查时，我也可以清楚地看到在发送列表之后。我可以看到正确的数据。

Devtools image

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

function page() {
  getFiles();


 <filesList/>
 }



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

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

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

【问题讨论】：

标签： reactjs redux firebase-storage

【解决方案1】：

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

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

【讨论】：