I am trying to implement a Set on the dropdown list object and within the Set, I am using map function . I have tried two different ways by using Set but there has been no removal of the duplicates. Here, devices is the object and from there am trying to execute Set with map function.
Here is the dropdown list which is showing repeated values. On the right hand-side , you can see the devices array being shown. The dropdown list should show 4-5 options of device_id. Please help.
集合不会移除具有不同引用的对象.即使对象具有相同的值，这些对象也不会被视为相同的:
const arr = [
// These objects look the same but are both unique objects in memory, so they have different references
{foo: 1},
{foo: 1}
];
const res = [...new Set(arr)];
console.log(res); // [{foo: 1}, {foo: 1}]您的情况类似于上面的示例，因为JSX <option ...></option>在幕后创建对象.
相反，我建议您使用different method来对devices数组中的重复对象进行重复数据消除.仅当您的devices数组在useMemo()的帮助下更改时(假设devices为状态)，您才能执行此重复数据消除，例如:
const uniqueDevices = useMemo(() => {
const uniqueMap = new Map(devices.map(device => [
device.device_id, // deduplicate by the `device_id` property
device
]);
return [...uniqueMap.values()];
}, [devices]);
// please post your code as text so we don't have to retype this :)
return <div>
<h1>Devices</h1>
<select>
{ devices ?
? uniqueDevices.map(device => <option key={device.device_id}>{device.device_id}</option>)
: null
}
</select>
</div>
如果您只需要在JSX中引用每个device对象的device_id属性，那么您可以继续使用Set()来删除重复项，如@andrew所示:
const uniqueDeviceIds = useMemo(() =>
Array.from(new Set(devices.map(device => device.device_id)))
, [devices]);
return <div>
<h1>Devices</h1>
<select>
{ devices ?
? uniqueDeviceIds.map(deviceId => <option key={deviceId}>{device_id}</option>)
: null
}
</select>
</div>