如何过滤同一属性中的对象数组？

Oliver D 发表于 Dev

奥利弗·D

我有一个“颜色，尺寸等”产品选项，并且我们知道用户可以从“从颜色中选择仅红色”选项中选择一项，这一次，我将所选的一个“单独的数组”选为“用户所有选项”但是问题是用户可以在相同的“例如颜色”字段中添加重复的选项，那么我该如何解决这个问题？最后的事情应该是：例如，来自单独选项的一件事情

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<number | null>();
  const [selectedIndexImage, setSelectedIndexImage] = useState<number | null>();
  interface ManipulateValueOptionProp extends valueOptionProp {
    optionType: string;
  }
  const [allOptions, setAllOptions] = useState<ManipulateValueOptionProp[]>([]);

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 (
          <View
            style={[
              styles.selectedText,
              {backgroundColor: selectedText ? 'black' : 'transparent'},
            ]}>
            <Text
              style={{
                textAlign: 'center',
                color: selectedText ? 'white' : 'black',
                fontSize: 12,
              }}>
              {value.name_en}
            </Text>
          </View>
        );
      }
      case 'Color': {
        return (
          <>
            <View
              // @ts-ignore
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                width: 53,
                height: 53,
                backgroundColor: value.display_value,
              }}
            />
            {selectedColor ? (
              <View style={styles.selectedColor}>
                <CheckmarkIcon color="black" />
              </View>
            ) : null}
          </>
        );
      }
      case 'images': {
        return (
          <>
            <Image
              // @ts-ignore
              source={{uri: value.display_value}}
              // eslint-disable-next-line react-native/no-inline-styles
              style={{width: 53, height: 53, backgroundColor: '#0f4c7f'}}
            />
            {selectedImage ? (
              <View style={styles.selectedColor}>
                <CheckmarkIcon />
              </View>
            ) : null}
          </>
        );
      }
      default: {
        return null;
      }
    }
  };



{item.options.map((option) => {
        return (
          <View style={styles.optionsBox}>
            <Text style={styles.optionTxt}>{option.label_en}</Text>
            <View style={{flexDirection: 'row'}}>
              {option.values.map((value: valueOptionProp) => {
                return (
                  <ScalePressable
                    key={`${option.id}${value.id}`}
                    onPress={() => {
                      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},
                        ]);
                      }
                    }}>
                    <View style={styles.values}>
                      {renderValue(value, option.type)}
                    </View>
                  </ScalePressable>
                );
              })}
            </View>
          </View>
        );
      })}

绿色盒子

这是一种可能的解决方案。您可以考虑通过删除与新选项具有相同选项类型的所有选项，然后将新选项添加到新数组中来创建新阵列。

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,
];

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。