javascript - React-elastic-carousel 仅在调整窗口大小后起作用

Question

我刚刚开始使用 react-elastic-carousel 包，并且在页面加载时遇到了问题。一切都在页面加载/刷新时加载，但是当我单击箭头移动轮播时，项目没有旋转。只有在调整窗口大小后，产品才能正确重新格式化，然后我才能继续正常使用按钮。我已经注释掉了我所有的 CSS，认为它可能与包的 CSS 发生冲突，但它什么也没做。我知道这个包使用 Resize Observer，但不确定这是否会成为问题。我已经附上了使用轮播的组件的代码以及到 react-elastic-carousel 包的 Github 的链接。任何方向或建议表示赞赏！

import React from 'react';
import axios from 'axios';
import RelatedProducts from './RelatedProducts.jsx';
import OutfitList from './OutfitList.jsx';
import Carousel from "react-elastic-carousel";

//Custom styles for carousel//
const breakPoints = [
  { width: 1, itemsToShow: 1 },
  { width: 550, itemsToShow: 2 },
  { width: 768, itemsToShow: 3 },
  { width: 1200, itemsToShow: 4 },
];

class RelatedProductsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: []
    }
    this.getRelated = this.getRelated.bind(this);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.mainProduct.id !== this.props.mainProduct.id) {
      this.getRelated()
    }
  }

  getRelated() {
    axios.get(`/api/${this.props.mainProduct.id}`)
      .then((results) => {
        this.setState({
        products: results.data
      })})
      .catch((err) => console.log(err));
  };


  render() {
    return (
      <div>
        <Carousel breakPoints={breakPoints}>
        {this.state.products.map((id, index) => {
          return (
            <RelatedProducts productId={id} key={index} mainProduct={this.props.mainProduct} updateCurrentProduct={this.props.updateCurrentProduct}/>
          )
        })}
        </Carousel>
      </div>
    );
  }
};

export default RelatedProductsList;

轮播包的 Github

标签： javascriptcssreactjscarousel