过滤出数组以获取唯一值并填充选择下拉框

Question

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

（（无，A，B，C）

该数组用于填充选择下拉框。

当我运行Web应用程序时，在我的网页中看起来像这样的下拉框（选择）：

<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>
    <option value>All</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Answer 1

在forEach中添加支票：

preFilteredRows.forEach(row => {
    if(row.values[id].length == 1) options.add(row.values[id])
})

并且您可以为值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)