如何基于带有预加载数据的选中/未选中输入来设置不同状态

如何解决如何基于带有预加载数据的选中/未选中输入来设置不同状态

我有两组来自API的数据，例如accountContacts和callReportContacts：

const accountContacts = [
  {
    Id: "3SLS-003QZ","First Name": "Lynne","Last Name": "Froisland"
  },{
    Id: "3SLS-003QA","First Name": "John","Last Name": "Doe"
  },{
    Id: "3SLS-003QB","First Name": "Jane",{
    Id: "3SLS-003RL","First Name": "Curtis","Last Name": "Shrestha"
  },{
    Id: "3SLS-003S1","First Name": "Susan","Last Name": "Simoncelli"
  }
];

const callReportContacts = [
  {
    Id: "3SLS-003RL","Last Name": "Shrestha",checked: true
  },"Last Name": "Simoncelli",checked: true
  }
];

现在，默认情况下，callReportContacts 没有具有选中属性。因此，我在设置其状态之前将其添加到响应中。然后，我将它们合并，以使callReportContacts中的项目替换accountContacts中的项目，如下所示：

useEffect(() => {
  setMergedContacts(
    accountContacts.map((contact) => {
      const item = callReportContacts.find(({ Id }) => Id === contact.Id);
      return item ? item : contact;
    })
  );
},[]);

然后我使用输入复选框组件（如果其设置为true，则具有预先检查的状态）呈现mergedContacts，例如：

{mergedContacts.map(({ Id,'First Name': firstName,'Last Name': lastName,checked }) => {
    return (
      <ToggleOption
        contacts={contacts}
        setContacts={setContacts}
        deselectedContacts={deselectedContacts}
        setDeselectedContacts={setDeselectedContacts}
        key={Id}
        contactID={Id}
        label={firstName + ' ' + lastName}
        ischecked={checked}
      />
    )
  })
}

我想要的是两种状态，即contact和deselectedContacts，它们将分别发布到其各自的API端点。如果我选中/取消选中未选中的输入，则应将其添加到联系人状态中/从联系人状态中删除，对于取消选中的联系人状态的预选中输入，也应将其添加/删除。这是bare bones working link

在该示例中，如果我选中/取消选中Lynne，John或Jane，则应将它们添加/从联系人状态中删除；如果我对Curtis或Susan进行相同的操作，则应将它们添加/从deselectedContacts状态中删除。 / p>

解决方法

您可以利用checked: true处理来自API的数据。该数据已经存储在mergedContacts上-如果最初检查了该对象，则可以将其用作标志。稍后将在评估是否按下contacts或deselectedContacts时使用它。

话虽如此，我看了看您的ToggleOption组件，看来您已经将该对象属性作为名为ischecked的prop传递了，而且，您并没有对其进行突变-这使工作更加轻松。

我所做的是我将其他道具传递给了ToggleOption组件，deselectedContacts状态和setDeselectedContacts状态设置器。之后，在ToggleOption输入的onChange / onClick事件上，我传递了ischecked道具，该道具指示是否最初检查了联系人。

return (
  <div className="toggle-option">
    <div onClick={() => handleToggle(ischecked)}>
      <input
        ref={toggleRef}
        data-id={contactID}
        onChange={() => handleToggle(ischecked)}
        ...

最后，在handleToggle处理程序上，我再次根据最初是否检查了联系为需要更新的状态添加了条件-我利用了ischecked属性。

const handleToggle = (ischecked) => {
  setCheckedState((prevState) => !checkedState);

  const item = {
    Id: toggleRef.current.getAttribute("data-id")
  };

  if (ischecked) {
    if (deselectedContacts.map((e) => e["Id"]).includes(item["Id"])) {
      setDeselectedContacts(
        deselectedContacts.filter((e) => e["Id"] !== item["Id"])
      );
    } else {
      setDeselectedContacts([...deselectedContacts,item]);
    }
  } else {
    if (contacts.map((e) => e["Id"]).includes(item["Id"])) {
      setContacts(contacts.filter((e) => e["Id"] !== item["Id"]));
    } else {
      setContacts([...contacts,item]);
    }
  }
};

CodeSandBox：https://codesandbox.io/s/charming-brown-6rczt?file=/src/App.js