如何过滤同一属性中的对象数组？
如何过滤同一属性中的对象数组？
提问于 2021-02-27 08:29:04
我有一个产品选项“颜色，大小，等”和我们知道用户可以选择一件事从选项“选择只是红色的颜色”，在这一次我选择了一个单独的数组“所有选项用户选择”，但问题是用户可以添加重复的选项在同一字段“例如颜色”，那么我如何解决这个问题？最后一件事应该是:例如，从单独的选项中选择一件事
SelectedOptions = [
{ name:"red",id:88,optionType:"Color"},
{ name:"XL",id:22,optionType:"Size"},
....
]但我现在要做的是
SelectedOptions = [
{ name:"red",id:88,optionType:"Color"},
{ name:"green",id:87,optionType:"Color"},
{ name:"XL",id:22,optionType:"Size"},
{ name:"M",id:22,optionType:"Size"},
....
];我知道这是因为我将任何选定的数组推入SelectedOptions数组，我正在尝试通过检查optionType但是我没有得到任何好的想法
代码片段
const [selectedIndexColor, setSelectedIndexColor] = useState<
number | undefined
>();
const [selectedIndexText, setSelectedIndexText] = useState();
const [selectedIndexImage, setSelectedIndexImage] = useState();
interface ManipulateValueOptionProp extends valueOptionProp {
optionType: string;
}
const [allOptions, setAllOptions] = useState([]);
const renderValue = (value: valueOptionProp, type: string) => {
const selectedColor = selectedIndexColor === value.id;
const selectedText = selectedIndexText === value.id;
const selectedImage = selectedIndexImage === value.id;
switch (type) {
case 'text': {
return (
{value.name_en}
);
}
case 'Color': {
return (
<>
{selectedColor ? (
) : null}
);
}
case 'images': {
return (
<>
{selectedImage ? (
) : null}
);
}
default: {
return null;
}
}
};
{item.options.map((option) => {
return (
{option.label_en}
{option.values.map((value: valueOptionProp) => {
return (
{
option.type === 'Color' &&
setSelectedIndexColor(value.id);
option.type === 'text' && setSelectedIndexText(value.id);
option.type === 'images' &&
setSelectedIndexImage(value.id);
if (
!allOptions.some(
(alreadyExist) => alreadyExist.id === value.id,
)
) {
setAllOptions((options) => [
...options,
{...value, optionType: option.type},
]);
}
}}>
{renderValue(value, option.type)}
);
})}
);
})}Stack Overflow用户
回答已采纳
发布于 2021-02-27 08:39:35
这里有一个可能的解决方案。您可以考虑创建一个新数组，方法是删除与新选项具有相同选项类型的所有选项，然后将新选项添加到新数组中。
let selectedOptions = [
{ name: 'red', id: 88, optionType: 'Color' },
{ name: 'XL', id: 22, optionType: 'Size' },
];
let newOption = { name: 'green', id: 87, optionType: 'Color' };
selectedOptions = [
...selectedOptions.filter(
option => option.optionType != newOption.optionType
),
newOption,
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66394436
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号