Reactjs 基于在“动态选择”下拉列表中选择的另一个选择删除选择选项

我有一些这样的下拉列表

const initData = [
   {
      "id":1,
      "name":"Type A",
      "description":"Description Type A"
   },
   {
      "id":2,
      "name":"Type B",
      "description":"Description Type B"
   },
   {
      "id":3,
      "name":"Type C",
      "description":"Description Type C"
   }
]
const [listOption, setListOption] =  useState(initData);
const arr = ['James', 'Paul', 'John', 'George', 'Ringo'];

const Check = (e, i) => {
    e.preventDefault();
      setListOption(
        initData.filter((entry) => entry.id !== parseInt(e.target.value))
      );
  };

{arr.map（项=>(
{
检查（e）；
}}
>
{listOption&&
listOption.map（（x）=>{
返回(
{x.name+item}
);
})}
))}

我希望这样，当用户在

第一个选择下拉列表中选择
“名称”：“键入A”
，在另一个选择下拉列表中，用户只能选择
“名称”：“键入B”
，
“名称”：“键入C”

或者，如果用户在第二个或第三个选择下拉列表中选择“名称”：“类型B”

，则在另一个选择下拉列表中，用户只能选择“名称”：“类型A”，

“名称”：“类型C”

---

我怎样才能做到这一点呢？

最好使用另一个数组，该数组将同时保存所有选定的选项。所以您将动态更改该数组中的数据，并将第一个数组与选定选项进行比较，第二个数组保存已选定的选项，在其他选择下拉列表中，您将根据该比较给出特定选项。

最好使用另一个数组保存所有选项当时的选择。因此，您将动态更改该数组中的数据，并将第一个数组与选定的选项进行比较，第二个数组保存已选定的选项，在其他“选择”下拉列表中，您将根据该比较给出特定选项。

您的代码确实有效，但只会过滤掉所选选项一次。更改第二个输入后，第一个选项将再次可用，对吗？您的代码确实有效，但只会过滤掉所选选项一次。更改第二个输入后，第一个选项将再次可用，对吗？

{arr.map(item => (
       <select
       name="Type A"
       onChange={(e) => {
        Check(e);
       }}
     >
       {listOption &&
         listOption.map((x) => {
           return (
             <option value={x.id} key={"key" + x.id}>
               {x.name + item}
             </option>
           );
         })}
     </select>
      ))}