映射Firebase中的图像列表并将其显示在React组件中

我有已上传到Firebase存储的图像，我想再次下载它们以在组件中呈现它们 . 我在Firebase实时数据库中保存了一个名称列表，以便我可以使用这些名称从Firebase存储中检索图像 .

在componentDidMount中，我正在检索图像，然后将它们作为数组保存到this.state . 当我尝试在渲染函数中映射数组时，没有任何反应 . 如果我是console.log（this.state.images），我看到了数组，但我无法映射它以呈现它 .

export default class Images extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();

  }

  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      this.setState(store.getState());
    });
    let photos = [];
    database
      .ref("images/")
      .once("value")
      .then(function(snapshot) {
        let values = snapshot.val();
        let images = [];

        for (var key in values) {
          images.push(values[key]["filename"]);
        }
        images.map(image => {
          // Create a reference to the file we want to download
          const storageRef = storage.ref();
          // Get the download URL
          storageRef
            .child("images/" + image)
            .getDownloadURL()
            .then(function(url) {
              // Insert url into an <img> tag to "download"
              photos.push(url);
            })
            .catch(function(error) {
              // A full list of error codes is available at
              // https://firebase.google.com/docs/storage/web/handle-errors
              switch (error.code) {
                case "storage/object_not_found":
                  // File doesn't exist
                  break;

                case "storage/unauthorized":
                  // User doesn't have permission to access the object
                  break;

                case "storage/canceled":
                  // User canceled the upload
                  break;
                case "storage/unknown":
                  // Unknown error occurred, inspect the server
                  break;
              }
            });
        });

      });
      this.setState({ images: photos})
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    return (
      <div>

       {this.state.images && this.state.images.map(image => {
         console.log(image)
       })
       }
        </div>
    )
  }
}