React中过滤器下拉框的UniqueValues如何按升序排序

解决方案 #

你只需要对getUniqueValues返回的年份数组做一次数字升序排序即可，修改代码中获取年份的那一行：

找到原代码中的这一行：

const years = getUniqueValues(all_products, "year");

替换为：

// 兼容字符串类型和数字类型的年份，按数字大小升序排列
const years = getUniqueValues(all_products, "year").sort((a, b) => Number(a) - Number(b));

说明

• 如果你的年份本身就是Number类型存储的，也可以简化为.sort((a, b) => a - b)
• 如果你需要降序排列，调换a和b的位置即可：.sort((a, b) => Number(b) - Number(a))

另外你代码中形状选择器的option标签存在语法错误，缺少闭合标识，原代码：

<option key={index} value={c}
  {c}
</option>

修正为：

<option key={index} value={c}>
  {c}
</option>

内容的提问来源于stack exchange，提问作者shaundvine