React Swiper с динамическим контентом

Я делаю карусель с изображениями из Instagram, используя react-id-swiper. Компонент Swiper, похоже, не обновляется после ответа. Я думал, что установка моего setState внутри componentWillMount сработает, но, видимо, нет. Когда я открываю инспектор в Chrome, он начинает работать?

import React, { Component } from 'react'
import Swiper from 'react-id-swiper'
import request from 'superagent'
import './index.css'

const swiperParams = {
  slidesPerView: 5,
  spaceBetween: 0,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
}

class Carousel extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photos: []
    }
  }

  componentWillMount() {
    this.fetchPhotos();
  }

  fetchPhotos() {
    request
      .get('https://api.instagram.com/v1/users/self/media/recent/?access_token=' + process.env.INSTAGRAM_ACCESS_TOKEN)
      .then((res) => {
        this.setState({
          photos: res.body.data
        })
      })
  }

  render() {
    return (
      <Swiper {...swiperParams}>
        {this.state.photos.map((photo, key) => {
          return (
            <div key={photo.id}>
              <img src={photo.images.standard_resolution.url} alt={photo.caption} />
            </div>
          )
        })}
      </Swiper>
    )
  }
}

export default Carousel

reactjs javascript instagram-api superagent
person Alex Smith    schedule 11.06.2018    source источник
comment
Вы видите исходящий запрос на вкладке сети инструментов разработчика?   -  person Chris G    schedule 11.06.2018
comment
Спасибо за ответ. Да, изображения загружены, карусель просто не понимает, сколько их, и ее нельзя прокрутить и т. Д., За исключением случаев, когда я открываю инструменты разработчика, которые, кажется, запускают обновление.   -  person Alex Smith    schedule 12.06.2018

Ответы (4)


arrow_upward
6
arrow_downward

В вашем объекте swiperParamas включите следующее свойство

rebuildOnUpdate: true
person configbug    schedule 17.04.2020

arrow_upward
5
arrow_downward

Я нашел эту проблему на github react-id-swiper, которая решила моя проблема.

Мне просто нужно было добавить свойство shouldSwiperUpdate к моему компоненту Swiper. Теперь компонент выглядит так:

<Swiper {...swiperParams} shouldSwiperUpdate>
  ...
</Swiper>

Это обновляет Swiper каждый раз, когда компонент повторно отображается.

person Alex Smith    schedule 12.06.2018
comment
это должен быть принятый ответ. Это не изменит положение при повторном рендеринге swiper. - person Kyo Huu; 21.01.2021

arrow_upward
4
arrow_downward

попробуйте добавить observer: true, в параметры

person dimidrol dimidrola    schedule 04.02.2019

arrow_upward
0
arrow_downward

Вам нужна карта в массиве вне рендера:

const swiperItems = this.state.photos.map((photo, key) => {
   return (
     <div key={photo.id}>
       <img src={photo.images.standard_resolution.url} alt={photo.caption} />
     </div>
   )
})

return (
    <Swiper {...swiperParams}>
        {swiperItems}
    </Swiper>
)

Это сработало для меня.

person Bruno Elias de Souza    schedule 21.09.2020