Javascript 多复选框渲染

我是ReactJS的新手。我正在构建一个基本应用程序，人们可以在指定日期范围内每天从两个选项中进行选择。我想在稍后阶段将复选框的值发送给API。也许100，也许500我不知道有多少复选框

我几次尝试都失败了。单击复选框时，将重新呈现所有列表。当有1000个复选框时，重新渲染会花费大量时间和时间 浏览器正在变慢

我的问题是，是否可以呈现单个复选框？如果没有，我该怎么办

我使用的是语义UI React，它是我的渲染函数。提前谢谢

render() {
    return (
        <Table>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell></Table.HeaderCell>
              <Table.HeaderCell>{gettext('Choice A')}</Table.HeaderCell>
              <Table.HeaderCell>{gettext('Choice B')}</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {this.state.datas.map((data, idx) => (
              <Table.Row key={idx}>
                <Table.Cell>
                  {data.date}
                </Table.Cell>
                <Table.Cell>
                  {data.choiceA == false &&
                    <div>{gettext("-")}</div>
                  }
                  {data.choiceB == false && data.choiceA == true &&
                    <Checkbox defaultChecked readOnly/>
                  }
                  {data.choiceB == true && data.choiceA == true &&
                    <Checkbox/>
                  }
                </Table.Cell>
                <Table.Cell>
                  {data.choiceB == false &&
                    <div>{gettext("-")}</div>
                  }
                  {data.choiceA == false && data.choiceB == true &&
                    <Checkbox defaultChecked readOnly/>
                  }
                  {data.choiceA == true && data.choiceB == true &&
                    <Checkbox/>
                  }
                </Table.Cell>
              </Table.Row>
              ))
              }
          </Table.Body>
        </Table>
    );
  }

---

我只使用React大约一年，但据我所知，我应该只查看更改的组件，并将更改呈现到DOM中

---

您是否将event.preventDefault（）与处理程序一起使用？

我认为您最好使用语义ui组件中选中的

属性：


我将简化代码并呈现如下复选框：

<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceA} readOnly/>
</Table.Cell>
<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceB} readOnly/>
</Table.Cell>



我怀疑所有这些条件语句都是/正在导致性能问题。
hi，我可以问一下您映射到表上的数据的格式吗。@kcneko我添加了这个
<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceA} readOnly/>
</Table.Cell>
<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceB} readOnly/>
</Table.Cell>