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

Question

我有已上传到 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>
    )
  }
}

Answer 1

您的代码中有很多不必要的重定向。您不需要使用 forceUpdate() 在 React 组件中显示图像列表。

1. 在状态中创建一个空间来存储图像

   state = { images: null }

2. 获取图像 URL 并将它们存储在状态中。

   componentDidMount() { database .ref("images/") .once("value") .then(snap => this.setState({images: snapshot.val()}) .catch(error => console.error(error)) }

3. 当 URL 处于可用状态时，映射 URL 并将每个 URL 呈现在图像标记中，就像您所做的那样。

   render() { return ( <div> {this.state.images && this.state.images.map((image, index) => { <img src={image} key={index}/> })} </div> ) }

在您的数据库调用中发生的时髦的存储引用舞蹈是完全没有必要的。您应该首先将 downloadURL 存储在数据库中。如果您不是，请登录this.state.images，以便我们查看您在数据库中存储的内容。您只是说您存储了一个名称列表，我不明白您的意思。