如何在React中的id的多个循环中传递默认复选框？

Question

我正在研究 React 复选框，但我遇到了 defaultCheckbox 的愚蠢错误。

我正在调用 API 来获取数据并应用地图并传递输入复选框。所以我得到了多个复选框输入。

当我编辑它时，我收到错误检查未显示在多个输入上。请任何人都可以帮助并向我建议如何解决这个复选框问题？

这张图片仅显示一个复选框，但我通过 props 为所有产品传递此 id

我正在使用此代码。我猜我需要应用任何循环来检查每个产品 ID。

<div key={"row-expanded-" + item.id}>
  {item.SubCategories.map((subval, i) => (
    <div key={subval.id} className="form-check mx-2">
      <p
        style={{
          fontWeight: "bold",
          color: "black",
          textDecoration: "none",
        }}
      >
        - {subval.sub_name}
      </p>
      {subval.products.map((p, index) => (
        <div key={p.id} className="form-check mx-2">
          <div class="form-check row">
            <input
              className="form-check-input mt-1"
              key={i}
              type="checkbox"
              value={p.id}
              defaultChecked={
                p.id == this.props.rowRcData[index] ? true : null
              }
              onChange={event => this.handleChangesub(event, i, p)}
            />
            <label className="label-brand mx-4 ml-4">{p.name}</label>
          </div>
        </div>
      ))}
    </div>
  ))}
</div>

Answer 1

使用React的DataTable，可以轻松地使用这种格式制作任何东西。使用我的代码-

常量列= [ { 编号: 1, 名称：“S.no”， 选择器：（行）=> row.id， 可排序：正确， 重新排序：正确， }, { 编号: 2, 名称：“电子邮件/电话”， 选择器：（行）=> row.email， 可排序：正确， 重新排序：正确， }, { 编号: 3, 名称：“用户名”， 选择器：（行）=>行.用户名， 可排序：正确， 重新排序：正确， },

{
  id: 4,
  name: "User Type",
  selector: (row) => (row.role == 1 ? "Admin" : "User"),
  sortable: true,
  right: true,
  reorder: true,
},
{
  id: 5,
  name: "",
  // selector: (row) => row.role,
  sortable: true,
  right: true,
  reorder: true,
},
{
  id: 6,
  name: "Action",
  button: true,
  cell: (row) => (
    <React.Fragment>
      <button
        className="btn btn-sm btn-light"
        onClick={() => onDelete(row._id)}
      >
        <i className="bx bx-trash me-0"></i>
      </button>
      &nbsp;
      <input type="checkbox"/>
      
    </React.Fragment>
  ),
},

];

<DataTable
        style={{ background: "transparent" }}
        title="User"
        columns={columns}
        defaultSortFieldId={1}
        sortIcon={<ArrowUpwardIcon />}
        pagination
      />