React 上的 JS 扩展运算符工作流程

Question

React 建议不要改变状态。我有一组对象，我正在根据一些事件进行操作。我的问题是，这样写可以吗：

const makeCopy = (arr) => arr.map((item) => ({ ...item }));

function SomeComponenet() {
    const [filters, setFilters] = useState(aemFilterData);

    const handleFilterClick = (filter, c) => {
        let copiedFilters = makeCopy(filters);

        /**
         * Apply toggle on the parent as well
         */
        if (!("parentId" in filter)) {
            copiedFilters[filter.id].open = !copiedFilters[filter.id].open;
        }
        setFilters(copiedFilters);
    }
}

我是否像上面那样改变了原始对象？还是这样写有区别吗：

const makeCopy = (arr) => arr.map((item) => ({ ...item }));

function SomeComponent() {
    const [filters, setFilters] = useState(aemFilterData);

    const handleFilterClick = (filter, c) => {
        let copiedFilters = makeCopy(filters);

        /**
         * Apply toggle on the parent as well
         */
        if (!("parentId" in filter)) {
            copiedFilters = copiedFilters.map((f) => {
            if (filter.id === f.id) {
              return {
                ...f,
                open: !f.open,
              };
            } else {
              return { ...f };
            }
          });
        }
        setFilters(copiedFilters);
    }
}

执行此操作的首选方法是什么？扩展运算符变得非常冗长，我不喜欢它，但如果我需要在这里这样做，我更喜欢它。 immutable.js 和 immer 或不是现在的选项。

Answer 1

const makeCopy = (arr) => arr.map((item) => item );

使用上面的代码，它会在原始对象引用上发生变异，因为我们没有创建深度克隆。

copiedFilters[filter.id].open = !copiedFilters[filter.id].open;

这里copiedFilters[filter.id]和filters[filter.id]的引用是一样的。

使用扩展运算符

const makeCopy = (arr) => arr.map((item) => ({ ...item }));

在这里，我们也创建了内部对象的新副本。所以copiedFilters[filter.id] 和filters[filter.id] 会有不同的引用。

这与您的第二种方法相同。

因此，您可以在制作副本时使用扩展运算符，也可以在第二种方法中跳过制作副本并直接映射到filters，因为您在那里使用了扩展运算符。这看起来更好，因为为什么要运行两次循环 - 首先创建副本，然后更新 open。

// let copiedFilters = makeCopy(filters); Not needed in second approach
copiedFilters = copiedFilters.map((f) => {
  if (filter.id === f.id) {
    return {
      ...f,
      open: !f.open,
    };
  } else {
    return { ...f };
  }
});

您可以在复制时创建深度克隆，但这会浪费计算和内存，我认为这里不需要。 当您在对象中进一步嵌套时，深层克隆会很有帮助。