React JS中如何移除多维数组对象中指定product_option_value_id的元素

你遇到的undefined问题根源很明确：forEach方法没有返回值，它只是遍历数组执行回调逻辑，所以你给filteredItems赋值的结果自然是undefined。另外在React开发中，我们应该尽量保持数据的不可变性（避免直接修改原数组/对象），这样才能正确触发组件的重渲染。

正确的实现方式 #

我们可以用map遍历外层数组（map会返回处理后的新数组），同时对每个对象里的product_option_value数组用filter过滤掉目标元素，并且返回新的对象而非直接修改原对象：

const removeOption = (itemId: string) => {
  // 使用map返回新数组，保持不可变性
  const filteredItems = productOptions.map(option => ({
    // 展开原对象的所有属性
    ...option,
    // 过滤掉匹配product_option_value_id的子项
    product_option_value: option.product_option_value.filter(
      value => value.product_option_value_id !== itemId
    )
  }));
  
  // 如果这是用来更新React状态的，记得这里要设置状态
  // setProductOptions(filteredItems);
  
  return filteredItems;
};

为什么你的原方法不行？ #

1. forEach无返回值：forEach的回调里即使修改了对象属性，它本身也不会返回任何内容，所以filteredItems会是undefined。
2. 直接修改原数据：你的代码里直接修改了o.product_option_value，这会改变原数组的内容，在React中如果productOptions是状态的话，直接修改不会触发组件重渲染，因为React依赖状态的引用变化来检测更新。

额外优化建议 #

• 尽量避免使用any类型，给你的数据定义接口，这样能获得TypeScript的类型检查支持：

  interface ProductOptionValue {
    ec_product_id: string;
    exclude_others: string;
    image: string;
    master_option_value: string;
    name: string;
    option_value_id: string;
    points: string;
    product_option_value_id: string;
  }
  
  interface ProductOption {
    default: number;
    master_option: number;
    master_option_value: number;
    maximum: number;
    minimum: number;
    name: string;
    option_id: string;
    product_option_id: string;
    product_option_value: ProductOptionValue[];
  }
  
  // 然后把productOptions的类型设为ProductOption[]
  const productOptions: ProductOption[] = [...]
  

• 如果itemId的类型确定是字符串（从你的数据示例看是字符串），就把参数类型定义为string而非any。

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