多个 react-select 使数组项只能 selected 一次

Question

我有一个页面，您可以在其中 select 类别，如果您按一个类别，则可以 select 子类别。我要构建的是一个类别只能 selected 一次。由于子类别，我不能只在一个 react-select 上使用 multi。

所以我得到的是一组类别。然后我得到了 selected 项目并且可以从列表中拼接它。但我不知道如何将前一个 selected 放回列表中。

我尝试了什么： prevState 但因为有多个 selects，如果你有三个 selects 你仍然可以获得双打。我尝试使用 findIndex 来搜索前一个 selected，如果它已经存在，请不要将其放回列表中，但我也被困在这里。

类别数组：

Categories = [{'value': 1, 'label': "category_1"}, {'value': 2, 'label': "category_2"}, {'value': 3, 'label': "category_3"}]

*lang 是荷兰语

有人知道怎么解决吗？

Answer 1

更新了我的原始答案，以便类别数量和类别选择数量可以是动态的。您可以查看评论中的 link 以获得工作示例。

import React, { useState } from "react";
    import "./styles.css";
    
    export default function App() {
      let categories = [
        { value: "1", label: "category_1" },
        { value: "2", label: "category_2" },
        { value: "3", label: "category_3" }
      ];
    
      const [categorySelects, updateCategorySelects] = useState([
        {
          id: 1,
          text: "select category",
          selectedValue: 0
        },
        {
          id: 2,
          text: "select category",
          selectedValue: 0
        },
        {
          id: 3,
          text: "select category",
          selectedValue: 0
        }
      ]);
    
      const categorySelectHandler = (val, id) => {
        let categorySelectArr = categorySelects.map((cs) => {
          if (cs.id == id) {
            cs.selectedValue = val;
          }
          return cs;
        });
        updateCategorySelects(categorySelectArr);
      };
    
      const checkAvailability = (val) => {
        let isAvailable = true;
        categorySelects.forEach((cs) => {
          if (val == cs.selectedValue) {
            isAvailable = false;
          }
        });
        return isAvailable;
      };
      return (
        <div className="App">
          {categorySelects.map((cs) => {
            return (
              <div>
                {cs.text}
                <select
                  onChange={(event) =>
                    categorySelectHandler(event.target.value, cs.id)
                  }
                  value={cs.selectedValue}
                >
                  <option value={0}>Selecteer categorie</option>
                  {categories
                    .filter(
                      (c) =>
                        checkAvailability(c.value) || c.value == cs.selectedValue
                    )
                    .map((c) => (
                      <option value={c.value}>{c.label}</option>
                    ))}
                </select>
              </div>
            );
          })}
        </div>
      );
    }

多个 react-select 使数组项只能 selected 一次

multiple react-select make it so a array item can only be selected once

javascript

arrays

reactjs

react-select