Javascript 如何在react js中显示和处理依赖于后端（Mongodb）中任务数组值的动态复选框？

我在一个react项目中工作，我有这样的要求

我在contain中有一个数组，一个对象和一个名为

Task[]

"contractor": [
                {
                  "contractGivenBy": -1,
                  "contractorID": 0,
                  "contractorName": "contractor1",
                  "reviewedByAssigner": false,
                  "submitReviewToAssigner": false,
                  "tasks": [ 2, 4, 6 ],
                  "tasksDone": false
                },

现在，我想在页面中将Tasks数组显示为复选框

这很好，我使用

map（）

方法显示了所有复选框，但问题是，当用户选中或取消选中特定复选框时，如何处理（从这些复选框中获取值）

我正在使用带有React钩子的React函数组件

这是我们尝试过的

{               
projectData.contractor[0]。tasks.map（（任务，索引）=>{
返回(
)
})
}
混蛋

已更新

在这里，它使用带有复选框实现的react钩子，我用

对它进行了一些调整，但您会明白的

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => {
  console.log("Checkbox: ", name, checked);

  return (
    <input type={type} name={name} checked={checked} onChange={onChange} />
  );
};

const CheckboxExample = () => {
  const [checkedItems, setCheckedItems] = useState({});

  const handleChange = event => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked
    });
    console.log("checkedItems: ", checkedItems);
  };

  const checkboxes = [
    {
      name: "check-box-1",
      key: "checkBox1",
      label: "Check Box 1"
    },
    {
      name: "check-box-2",
      key: "checkBox2",
      label: "Check Box 2"
    }
  ];

  return (
    <div>
      <lable>Checked item name : {checkedItems["check-box-1"]} </lable> <br />
      {checkboxes.map(item => (
        <label key={item.key}>
          {item.name}
          <Checkbox
            name={item.name}
            checked={checkedItems[item.name]}
            onChange={handleChange}
          />
        </label>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<CheckboxExample />, rootElement);

import React，{useState}来自“React”；
从“react dom”导入react dom；
const Checkbox=（{type=“Checkbox”，name，checked=false，onChange}）=>{
日志（“复选框：”，名称，选中）；
返回(
);
};
常量复选框示例=（）=>{
const[checkedItems，setCheckedItems]=useState（{}）；
const handleChange=事件=>{
setCheckedItems({
…检查一下，
[event.target.name]：event.target.checked
});
log（“checkedItems:，checkedItems”）；
};
常量复选框=[
{
名称：“复选框-1”，
键：“复选框1”，
标签：“复选框1”
},
{
名称：“复选框-2”，
键：“复选框2”，
标签：“复选框2”
}
];
返回(
选中的项目名称：{checkedItems[“check-box-1”]}

{复选框.映射（项=>(
{item.name}
))}
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

可以显示多少个复选框？

tasks:[2,4,6]

是否表示复选框编号？对于数组中的每个元素，我想显示一个复选框并获取复选框的值，该值最终是数组元素本身。好的，那么最大复选框是多少？我的意思是，如果有

任务：[2,4,6]

，那么是否有6个或更多复选框？如果计数是动态的，您如何知道总计数？

tasks.length

方法知道任务数组长度。

tasks

只有复选框编号，不是吗？我相信你应该显示所有的复选框，即使没有选中。我误解了吗？是的，我已经试过了，但是每次调用

handleTask（）

时，

taskSet（）

都会替换旧值。那不是我想要的行为@rajuI尝试过这样做，首先我会在顶部取一个空数组，对于每个复选框，我取值并推送到那个空数组，比如

onChange={（e）=>data.push（e.target.value）}

。在用户提交后，我将其存储在如下状态

const[checkboxData，setCheckboxData]=React.useState（data）查看此图像。我已经使用set（）数据结构来存储唯一的检查值，它会再次执行solemme检查，看到了吗