如何使用多选过滤 React Native 中的对象数组？

Question

我正在尝试根据 React Native 中的多选元素中选择的值来过滤对象数组

如果我有以下数据数组：

data = [
{"_id": "01", "brand": "1", "size": "20"},
{"_id": "02", "brand": "2", "size": "21"},
{"_id": "03", "brand": "1", "size": "19"},
{"_id": "04", "brand": "3", "size": "21"},
{"_id": "05", "brand": "1", "size": "20"},
{"_id": "06", "brand": "2", "size": "20"},
{"_id": "07", "brand": "3", "size": "21"},
{"_id": "08", "brand": "3", "size": "18"},
]

然后我有以下用于多选下拉列表的选项，这些选项是使用 useState 挂钩选择的并存储为数组。

const dropdownData = [
  { label: '1', value: '1' },
  { label: '2', value: '2' },
  { label: '3', value: '3' },

]

所以我需要根据已选择并存储在下拉数组中的选项来过滤数据数组

我尝试使用标准 js 数组过滤对数组进行排序，但我似乎无法使用 useState 钩子和过滤来使其与多选一起使用，并在选择选项时进行过滤。

Answer 1

在 React Native 中，您将拥有一个包含所选数据 ID 的状态，因此您可以使用下面的代码来过滤数据。

const [selectedItems, setSelectedItems] = useState([]);

const multiSelectChangeHandler = (selectedItems) => {
    setSelectedItems(selectedItems);
  };

const filteredData = data.filter(item => selectedItems.includes(item.brand));

或者如果当前场景没有状态，你可以得到这样的过滤数据：

const selectedValues = dropdownData.map(option => option.value);

const filteredData = data.filter((val) =>
  selectedValues.includes(val.brand)
);