如何管理在多个引导卡中显示的复选框的状态

Question

在调用API时，我得到了多个JSON对象（可能是2、3、6或其他计数），其中包含字符串数组，每个对象的长度超过6000条记录。我需要在引导卡中显示这些记录。

例如，如果我有2个JSON对象，则应显示2张卡，每个引导卡都包含带有复选框的记录名称。

所以，我该如何管理这些复选框的状态，假设我单击cardb应用按钮，那么只有cardb选中的复选框和卡的名称（即“ cardb”）应该在某处捕获，以便我可以使用此信息进行进一步的API调用。

有人可以帮我吗？

Main.JSX

render() {
    return (
      <main
        role="main"
        className="flex-shrink-0">
        <div className="container">
          <form onSubmit={this.handleWidgetsCardFormSubmit}>
            <div className="row flex-row flex-nowrap wc-main-div-scroll">
              {this.displayWidgetsCard()}
            </div>
          </form>
        </div>
      </main>
    );
  }

 displayWidgetsCard() {
    if (this.state.displayWidgetsCard === true) {
      console.log("Total widgets card to show: ",this.state.cardCount.length);
      let t = [];
      for (let i = 0; i < this.state.cardCount.length; i++) {
        t.push(
          <Card
            key={this.state.cardCount[i].cardname}
            cardName={this.state.cardCount[i].cardname}
            recordCount={this.state.cardCount[i].count}
            createCheckboxes={this.createCheckboxes3(this.state.cardCount[i].recordsArr)}
          />
        );
      }
      return t;
    } else {
      return null;
    }
  }

  componentWillMount = () => {
    this.selectedCheckboxes3 = new Set();
  };

   toggleCheckbox3 = label => {
    if (this.selectedCheckboxes3.has(label)) {
      this.selectedCheckboxes3.delete(label);
    } else {
      this.selectedCheckboxes3.add(label);
    }
  };
  createCheckbox3 = label => (
    <Checkbox
      label={label}
      handleCheckboxChange={this.toggleCheckbox3}
      key={label}
    />
  );

  createCheckboxes3 = array1 => array1.map(this.createCheckbox3);

Card.JSX

import React, { Component } from "react";
import "./styles.css";

class Card extends Component {
  render() {
    const { cardName, createCheckboxes, recordCount } = this.props;
    return (
      <div className="col-4">
        <div className="card wc-dim border-dark sh">
          <div className="card-header">
            <b>
              {cardName}
              {" (" + recordCount + ")"}
            </b>
            <div className="input-group mt-2">
              <input
                type="text"
                className="form-control search-form"
                placeholder="Search"
              />
            </div>
          </div>
          <div className="card-body wc-scroll">
            <div className="card-text">{createCheckboxes}</div>
          </div>
          <div className="card-footer bg-transparent">
            <button className="btn btn-primary" type="submit" id="btn-right">
              Apply
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default Card;