React与JavaScript数组优化：自定义选项增删函数的改进实现

嘿，我来帮你优化这两个操作自定义选项的函数！首先得指出你原有代码的小问题：虽然用Object.assign复制了tempRecipe对象，但customizationOptions数组还是沿用了原状态的引用——这并没有完全遵循React状态的不可变更新原则，可能会导致组件无法正确响应状态变化，或者出现难以追踪的渲染bug。

下面是更规范、更符合React最佳实践的实现方案：

1. 添加自定义选项 #

const addCustomizationOption = (co) => {
  // 使用函数式更新，确保基于最新的状态值计算新状态
  setTempRecipe(prevRecipe => ({
    // 复制原对象的所有属性
    ...prevRecipe,
    // 创建新数组：展开原数组元素 + 新增选项
    customizationOptions: [...prevRecipe.customizationOptions, co]
  }));
};

为什么这样更好？ #

• 用扩展运算符(...)创建了全新的数组，完全不修改原状态中的数组引用
• 函数式更新(prevRecipe => ...)避免了闭包捕获旧状态值的问题，在连续多次更新时更可靠
• 整体写法更简洁，符合现代React的状态更新风格

2. 移除自定义选项 #

const removeCustomizationOption = (co) => {
  setTempRecipe(prevRecipe => ({
    ...prevRecipe,
    // 使用filter创建新数组，过滤掉要移除的选项
    customizationOptions: prevRecipe.customizationOptions.filter(item => item.id !== co.id)
  }));
};

为什么这样更好？ #

• filter方法会返回一个新数组，原数组完全保持不变，严格遵循不可变原则
• 相比findIndex + splice的组合，代码更简洁易读，减少了手动操作索引的出错风险
• 同样采用函数式更新，确保状态更新的准确性

额外小提示 #

如果你经常需要处理这类数组状态的不可变操作，可以考虑使用Immer库——它能让你用“可变”的写法实现不可变更新，代码会更直观：

// 示例：用Immer优化添加操作
import { produce } from 'immer';

const addCustomizationOption = (co) => {
  setTempRecipe(prevRecipe => produce(prevRecipe, draft => {
    draft.customizationOptions.push(co);
  }));
};

不过这属于可选优化，上面的原生写法已经完全满足需求啦。

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