Reactjs 如何使用React创建一个大型清单页面？

我想创建一个包含100个清单项目的页面。项目将从firestore文档中读取并更新到firestore文档

我目前的做法是：

// define states which hold checkbox value
  const [checkA, setCheckA] = useState(false);
  ...
  ...// 100 such states

// writing to firestore
  firestore()..
  .set({
     checkA: checkA
     ... // 100 key,value pairs
   })

// JAX
  return(
    <checklist
       label= 'checkA'
    />
    <checklist
       label= 'checkB'
    />
    ... // 100 such components
  )

//定义保存复选框值的状态
const[checkA，setCheckA]=useState（false）；
...
……100个这样的国家
//写信给firestore
firestore（）。。
.设置({
查卡：查卡
…//100个键、值对
})
//JAX
返回(
…//100个这样的组件
)

---

有没有更好、更省力的方法呢？

如果在状态中为100个项目存储一个对象，不是会更容易吗

然后，您可以根据逻辑（如果它是一个对象）像这样不断更改状态：

当您存储到firestore时，您可以直接使用处于您状态的对象

编辑

首先，定义一个状态变量，该变量将保存所有检查表项

const [checkList, setCheckList] = React.useState({checkA: false, checkB: false....100 items})

在清单组件中，这是设置新状态的方式

<CheckBox label="CheckA" onChange={(value)=>setCheckList({...checkList, checkA: value)} />


<CheckBox label="CheckB" onChange={(value)=>setCheckList({...checkList, checkB: value)} />

---

如果在状态中为100个项目存储一个对象，不是更容易吗

然后，您可以根据逻辑（如果它是一个对象）像这样不断更改状态：

当您存储到firestore时，您可以直接使用处于您状态的对象

编辑

首先，定义一个状态变量，该变量将保存所有检查表项

const [checkList, setCheckList] = React.useState({checkA: false, checkB: false....100 items})

在清单组件中，这是设置新状态的方式

<CheckBox label="CheckA" onChange={(value)=>setCheckList({...checkList, checkA: value)} />


<CheckBox label="CheckB" onChange={(value)=>setCheckList({...checkList, checkB: value)} />

---

嘿，我是新来的。你能给我举一个完整的例子吗？嘿，为我可能采取的方法添加了更多细节。我面临一个bug。这个{setCheckList（{…checkList，“实际项目字符串”：value}}）可以正常工作。但是{setCheckList（{…checkList，item:value}}）创建了一个带有“item”的额外的第101个复选框作为值。我正在使用Material UI复选框。有什么想法吗？解决了，嘿，我是个新手。你能给我指一个完整的例子吗？嘿，为我可能采取的方法添加了更多细节。我面临一个错误。这个{setCheckList（{…checkList，“actual item string”：value}}很好用。但是{setCheckList（{…checkList，item:value}}创建一个附加的第101个复选框，值为“item”。我正在使用Material UI复选框。有什么想法吗？已解决

firesStore().set(checkList);