javascript - 如何解决 React 中带有复选框的数组设置？

Question

我在 react js 中的表中的复选框类型字段存在问题，我需要从表中选择项目并使用这些选定项目创建一个数组，我已经控制了它，但是在将项目合并到的函数中数组停止工作复选框内选中的标记。我留下部分代码以便理解。

这里是表格的界面，在这种情况下，检查被激活，因为在代码中我已经注释了将所选项目添加到数组的部分。

这段代码是我映射包含表数据的数组的地方，在操作中我调用 Checkbox 组件，该组件通过参数接收项目的 id 初始状态和函数 selectedItem。

const dataBuyersAgents = buyersAgents.map(
  ({ id, name, lastName, email, phone, estate, zipCode }) => {
    return {
      id: id,
      name: `${name} ${lastName}`,
      email: email,
      phone: phone,
      state: estate,
      zipCode: zipCode,
      action: <Checkbox id={id} initialState={false} handleChange={selectedItem} />,
    };
  },

这是 Ceckbox 组件。

const Checkbox = ({ initialState, id, handleChange }) => {
   return (
    <input
      type="checkbox"
      onChange={(e) => handleChange(id, e.target.checked)}
      defaultChecked={initialState}
   />
  );
};

而这里的SelectedItem函数接收选中项的id，并在表的数据数组中查找，如果成功，应该用来设置选中项的数组。那是它失败的地方，因为每次您尝试设置数组以添加新项目时都会停止工作，未标记复选框的选中状态，但是如果您添加项目并且有必要添加每个选定的项目，而且还要标记已选中在界面中。

const selectedItem = (value) => {
  const id = parseInt(value); // id del item seleccionado
  const item = buyersAgents.find((buyer) => buyer.id === id);
  console.log('Item to add', item);
    // setItemsSelected([...state, item ]);
 };

我感谢任何可以帮助我解决此错误的人，因为我尝试了不同的方法和技术并且无法解决该错误。

标签： javascriptarraysreactjs