React新手求助：useState合并对象数组时出现重复元素（重复Japan）

你遇到的两个Japan的问题，根源是直接合并了props.selectedValues和Redux返回的数组，两者都包含id=1的Japan，没有做去重处理。

解决方案：根据唯一id去重 #

因为id是每个选项的唯一标识，我们可以基于id过滤重复项，优先保留props中的已选值，再合并Redux中不重复的选项。

修改后的代码如下：

const getUnselectedValues = useSelector(UnselectedValues);

const [options, setOptions] = useState(() => {
  // 用Map存储id和对应项，利用键的唯一性自动去重
  const optionMap = new Map();

  // 先添加props中的已选值，确保优先保留
  if (props.selectedValues) {
    props.selectedValues.forEach(item => {
      optionMap.set(item.id, item);
    });
  }

  // 添加Redux中的值，id已存在则跳过
  getUnselectedValues.forEach(item => {
    if (!optionMap.has(item.id)) {
      optionMap.set(item.id, item);
    }
  });

  // 把Map转换为数组返回
  return Array.from(optionMap.values());
});

console.log('options:', options)

代码说明 #

1. 用Map存储选项，依靠键的唯一性自动避免重复；
2. 先加入props的已选值，保证已选项不会被覆盖；
3. 遍历Redux数据时，只添加未在Map中出现过的id对应的选项；
4. 使用useState的回调初始化函数，避免组件每次渲染都重复执行合并逻辑，提升性能。

处理后，options数组会和你期望的结果一致，不会出现重复的Japan。

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