React和Swiper - 幻灯片中未完全呈现的项目

Question

我正在使用this package生成带有外部API内容的动态幻灯片。我可以在swiper之外生成内容没有问题，但是一旦它需要在swiper内渲染，我可以看到第一项，但不能使用箭头导航到不同的幻灯片（即使我可以排序扫过并查看其他项目已呈现。我该如何解决这个问题？

import React, { Component } from 'react';

import '../styles/vendor/swiper/swiper.min.css';
import Swiper from 'react-id-swiper';

export default class PortfolioSwiperAll extends Component {
  constructor() {
    super();
    this.state = {
      portfolio_items: []
    }
  }
  componentDidMount() {
    let portfolioURL = "[api endpoint hidden]";
    fetch(portfolioURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          portfolio_items: res
        })
      })
    }

  render() {
    const params = {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    }

    let portfolio_items = this.state.portfolio_items.map((portfolio_item, index) => {
      return <div key={index}>
      <p><strong>Title:</strong> {portfolio_item.title.rendered}</p>
      </div>
    });

    return(
      <div className="portfolio-container">
      <h2>Portfolio</h2>
      <Swiper {...params}>
        {portfolio_items}
        </Swiper>

        {/* testing to see that it does render */}
        <h3>actual items</h3>
        {portfolio_items}
      </div>
    )
  }
}