页面刷新后图像未呈现（GET 403 错误）React 和 Firebase

Question

我有一个简单的应用程序，用户可以在其中上传图像并查看它们。上传完成后，将显示到 /yourlibrary 的应用程序路由和图像。但是刷新页面时不会显示它们。当用户在应用程序中单击您的图书馆按钮时，第一次单击不执行任何操作，第二次单击检索一些图像但也有许多 GET 403 权限错误。 （如果用户只有 3 张图片，则不会出现这些 GET 403 错误。）

登录的用户为真。抱歉，如果我不能很好地组织我的问题，但我不知道为什么会这样。一旦我更好地理解了这个问题，我将对其进行编辑。

import React, { Component } from 'react'
import firebase from "../firebase/config"
export default class Photos extends Component {
  state={
    photos:[]
  }
  componentDidMount(){
    let images=[]
    firebase.firestore().collection(localStorage.getItem("user_id")).get().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          let imageData={
            url:doc.data().url,
            created:doc.data().added
          }
          images.push(imageData)

      });
  });
  this.setState({ photos: images });
  }
  render() {
    const items=this.state.photos;

    return (
      <div className="container-fluid pt-3">
        <div className="card-columns">
          {items.map((item)=>(
            <div className="card">
              <img key={item.url} className="card-img-top materialboxed" src={item.url} alt=""/>
            </div>
         ))}
        </div>
      </div>

    )
  }
}

Answer 1

this.setState({ photos: images });放错了地方，请检查下面的代码sn-p

componentDidMount(){
    let images=[]
    firebase.firestore().collection(localStorage.getItem("user_id")).get()
    .then((querySnapshot) => { // <--- To get access to this.state
        querySnapshot.forEach(function(doc) {
            let imageData={
                url:doc.data().url,
                created:doc.data().added
            }
            images.push(imageData)
        });
        this.setState({ photos: images }); //<---- it should be here
    });
    // images will not be updated here, due to asynchronous execution
    // this.setState({ photos: images });
}