React 中的随机集固定大小答案

【问题标题】：Random Set fixed size in ReactReact 中的随机集固定大小
【发布时间】：2020-08-02 06:05:10
【问题描述】：

我正在从 React 中的 .json 文件中获取随机数组。我用它来制作卡片，并希望卡片正好是 16 张卡片，每个数字显示两次。我正在使用Set 来保持它的唯一性，然后制作一个数组，但是一旦 Set 大小为 8，我无法弄清楚如何触发循环结束。截至目前，我将其硬编码为 8，但如果有重复，则 Set 最终会太小，我明白这是为什么。似乎循环无法访问 Set 大小，但我不知道如何实现。我试过this.state.practiceCards.size < 8，但没用。

如何让循环结束？

  constructor(props) {
    super(props); 
      this.state = {
        cards,
        practiceCards: new Set(),
        practiceCardsArray: [],
      }
      this.addPracticeCard = this.addPracticeCard.bind(this);
  }

  componentDidMount() {
    this.addPracticeCard();
  }

  addPracticeCard() {
    for (let i = 0; i < 8; i++){
      const randIndex = Math.floor(Math.random() * cards.length);
      this.setState(state => ({
          practiceCards: state.practiceCards.add(cards[randIndex]),
          practiceCardsArray: [...state.practiceCards, ...state.practiceCards]
      }))
    }
  }

【问题讨论】：

先等到集合有正确数量的卡片然后调用 setState。在本地跟踪函数中的集合以测试其大小
你提供的代码不够用，请问构造函数里有什么？
@SaifMasadeh，谢谢我编辑了问题以包含构造函数代码。

标签： javascript arrays reactjs loops set

【解决方案1】：

想通了..

  componentDidMount() {
    this.generatePracticeCards();
  }

  generatePracticeCards() {
    for (let i = 0; this.state.practiceCards.size < 8; i++){
      this.addRandomCard();
    }
  }

  addRandomCard() {
    const randIndex = Math.floor(Math.random() * cards.length);
    this.setState({ practiceCards: this.state.practiceCards.add(cards[randIndex]) })
  }

【讨论】：