Блог

У меня возникли проблемы с визуализацией моих объектов с помощью .map () в React / NextJS.

У меня есть функция, с помощью которой я получаю изображения из облачного хранилища Firebase, код приведен ниже:

     getImages = () => {
        let firebase = loadFirebase()
        var storageRef = firebase.storage().ref('chest')

        let { state } = this

        storageRef.listAll().then((result) => {
            let data = []

            result.items.forEach((imageRef) => {
                imageRef.getDownloadURL().then((url) => {
                    data.push(url)
                }).catch((error) => {
                    // Handle any errors
                })
            })

            state.images = data
            this.setState({ images: data })
        }).catch((error) => {
            // Handle any errors
        })
    }
  

Эта часть, похоже, работает, поскольку я возвращаю данные, и состояние обновляется, результаты как на скриншоте:
Результаты после setState

Затем я сопоставляю изображения с приведенным ниже кодом:

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

На той же странице, что и эта, у меня есть другие места, где я получаю данные из Firebase, соответствующим образом устанавливаю свои состояния и визуализирую объекты с помощью .map(). В этих случаях это работает отлично. Разница в том, что в этих случаях я использую getInitialProps () для получения моих данных из Firebase, тогда как для данных из облачного хранилища у меня есть функция, описанная выше, функция getImages(), которая вызывается в componentDidMount()

Но в обоих случаях состояние задается в componentDidMount(), и конечный результат, возвращаемый this.state, выглядит как на прилагаемом скриншоте.

Любая помощь и / или улучшения в этом будут высоко оценены.

Вы никогда не должны устанавливать значения состояния вручную. Вам следует просто удалить строку, которая переводит изображения в состояние перед вызовом setState . Эта строка предотвращает отображение, поскольку после этого react не может обнаружить никаких изменений при установке состояния с помощью setState :

 getImages = () => {
    let firebase = loadFirebase()
    var storageRef = firebase.storage().ref('chest')

    storageRef.listAll().then((result) => {
        let data = []

        result.items.forEach((imageRef) => {
            imageRef.getDownloadURL().then((url) => {
                data.push(url);
                this.setState({ images: data });
            }).catch((error) => {
                // Handle any errors
            })
        });
    }).catch((error) => {
        // Handle any errors
    })
}