过滤掉数组以获取唯一值并填充 select 下拉框

Question

我有一个来自 API 的数组，它可以包含 4 个不同值的组合：

(none, A, B, C)

该数组用于填充 select 下拉框。

当我运行网络应用程序时，在我的网页中看起来像这样的下拉框(select):

<select>
    <option value>All</option>
    <option value="A,B,C">ABC</option>
    <option value></option>
    <option value="A,C">AC</option>
    <option value="B">B</option>
    <option value="B,C">BC</option>
    <option value="C">C</option>
select>

当我希望它看起来像这样时：

<select>
    <option value>All</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

它正在使用 React-Table 库中的这个函数从状态动态填充：

function SelectColumnFilter({
    column: { filterValue, setFilter, preFilteredRows, id },
}) {
    // Calculate the options for filtering
    // using the preFilteredRows
    const options = React.useMemo(() => {
        const options = new Set()
        preFilteredRows.forEach(row => {
            options.add(row.values[id])
        })
        return [...options.values()]
    }, [id, preFilteredRows])
    console.log("SelectColumnFilter: ", options);

当我将选项写到控制台时，这是我看到的：

0: (3) ["A", "B", "C"]
1: (0) []
2: (2) ["A", "C"
3: (1) ["B"]
4: (2) ["B", "C"]
5: (1) ["C"]

所以因为我知道只有 4 个可能的值，All、A、B 和 C 我想在我的 select 控件中使用，所以我想知道是否有办法过滤掉选项数组只显示每个唯一值，因此它看起来像这样：

<select>
    <option value>All</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Answer 1

在您的 forEach 中添加一个支票，并首先创建一个临时数组，然后 return 一个 Set 使其唯一：

let tempArr = [];
preFilteredRows.forEach(row => {
    if(row.values[id].length == 1) tempArr.push(row.values[id][0])
})
return [...new Set(tempArr)]

并且您可以为值 All 或 None 添加默认选项，视情况而定

Answer 2

只需将您的数组缩减为一个巨大的数组并将其转换为一组即可。

array = [["A", "B", "C"],[],["A", "C"],["B"],["B", "C"],["C"]]
const all = array.reduce((acc, inner) => acc.concat(inner), []) 
const unique = new Set(all)
console.log(unique)

过滤掉数组以获取唯一值并填充 select 下拉框

Filter out array to get out unique values and populate a select dropdown box

javascript

reactjs

react-table