为什么使用键作为索引从列表中删除项目按预期工作？

Question

我有一个组件，您可以在其中添加或删除一个选项项。当我删除一个选项项时，它只是从使用index 值存储在状态中的options 列表中删除。

我本以为因为我使用 index 作为键，所以每当我删除一个选项项时，最后一个元素会被错误地删除，但它似乎按预期工作。

   displayedOptions = options.map((option, optionIndex) => (
      <DropdownOption
        option={option}
        onRemoveOption={() => onRemoveOption(optionIndex)}
        onChange={onChangeOption(optionIndex)}
        key={optionIndex}
      />
    ));

  const onRemoveOption = (taskIndex: number) => (optionIndex: number) => {
    const newTaskFields = [...taskFields];
    newTaskFields[taskIndex].options = newTaskFields[taskIndex].options.filter(
      (_option, index) => {
        return optionIndex !== index;
      }
    );
    setTaskFields(newTaskFields);
  };

这样做有什么风险吗？ 有人知道为什么会按预期工作吗？

我认为我的应用中的行为与此处报告的行为相似：React - Deleting from middle of list removes last element instead

也就是说，如果我有一个使用索引作为包含以下值的键的列表：

[a, b, c]

并且我删除了索引 0 ('a')，我认为差异会在：

Original:
[0:a, 1:b, 2:c]
and
Updated:
[0:b, 1:c]

在这种情况下，React 会看到键 0 和 1 仍然存在，并将继续渲染 a 和 b，因为它会假设这些键没有改变。这将导致c 消失（而不是a）。

谢谢。

Answer 1

在实现基于地图索引的排序和删除时会出现问题。

例如

让选项 = [d,a,e,y];

现在选项和索引看起来像这样。

d 0 一个 1 2 是 3

删除项目始终应用对上一个项目的更改。因为您没有将唯一键传递给该项目。读取 diff 算法。

但是如果你实现排序和删除 - 它会在删除特定元素时失败

排序后索引会改变 一个 0 d 1 2 是 3

您可以发送选项名称而不是索引。

Answer 2

您的onRemoveOption 部分正确。您应该浅层复制您打算更新的数组/对象的所有元素（变异/删除/等...）。

您的 onRemoveOption 处理程序将变为：

const onRemoveOption = (taskIndex: number) => (optionIndex: number) => {
  setTaskFields((tasks) =>
    tasks.map((task, index) =>
      index === taskIndex
        ? {
            ...task,
            options: task.options.filter((_, index) => index !== optionIndex)
          }
        : task
    )
  );
};

• 使用功能状态更新
• 将任务映射到新的数组对象
• 如果任务索引与您需要从中删除选项的索引匹配，则浅拷贝到新对象并更新options 属性，否则返回任务对象
• 如果删除选项，请按索引过滤选项