reactjs - React-Tinder-Cards 循环（没有更多卡片时的功能）

Question

当没有更多数据可显示时，需要创建该功能。

这是代码：

import React from "react";

import { adultPack } from "../../../../static/data/packsData";

import TinderCard from "react-tinder-card";

import GameNavbar from "../../Containers/Game_Navbar";

const gif = "https://media.giphy.com/media/RJ2Eet1AB4IOVERF8N/giphy.gif";

export default class AdultPack extends React.Component {
  constructor() {
    super();
    this.state = {
      questions: [],
      randomQuestions: [],
      isLoading: true,
    };
  }

  componentDidMount() {
    const shuffled = adultPack.sort(() => Math.random() - 0.5);

    this.setState({
      randomQuestions: shuffled,
    });
  }

  render() {
    return (
      <div className="game">
        <GameNavbar />
        {this.state.randomQuestions.map(function (item, i) {
          return (
            <TinderCard className="swipe">
              <div className="game__content">
                <div className="game__content-game">
                  <div className="game__content-game-title">
                    <span>Я никогда не</span>
                  </div>
                  <h5>{item}</h5>
                </div>
              </div>
            </TinderCard>
          );
        })}
        <img src={gif} alt="Gif" className="game__gif" />
      </div>
    );
  }
}

因此，当卡片滚动后数据结束时，它只显示空白页。需要循环“adultPack”中的所有项目

标签： reactjs