reactjs - 从 useSelector() 编辑局部变量时，Redux 状态正在发生变化

Question

我正在使用 useSelector() 来获取状态，当我将一些过滤器应用于局部状态变量时，我的全局状态正在发生变化。不知道为什么。下面是代码。

const filterVacations = (employees, status) => {
    if(status === 'Approved') {
        employees.forEach(item => {
            item.vacations = item.vacations.filter(vac => vac.approved === true);

        });
    }
    else if(status === 'Unapproved') {
        employees.forEach(item => {
            item.vacations = item.vacations.filter(vac => vac.approved === false);

    });

    }
    return employees.filter(item => item.vacations.length > 0);
  }

并调用此函数如下:

const Vacations = () => {
    const state = useSelector((state:State) => state);
    const view = state.view;
    const filter = state.filter;
    const employees = state.employees;

    employees = filterVacations(employees, filter); 

    return (
      <>
      //some component...
      </>);

  }

为什么状态在这里发生变异？

Answer 1

这是因为当你说 const filter = state.filter; 时你没有传递值但它的传递引用。

例如，考虑一个书架，在图书馆的顶部有 JS 书籍。当您访问图书馆时，不会给您书的副本，而是书的位置。因此，如果您撕下书页并将其保留在原处。图书管理员也可以看到被撕毁的页面。但是，如果您不希望这种情况发生。您需要获取该书的副本并撕掉其中的书页，而书架上的书将保持原样。

因此，当您想要复制数据并将其存储在变量中时，ES6 引入了比早期笨拙的方法更简单的方法。所以这个const filter = state.filter;
会变成这个const filter = [...state.filter]; // this makes copy of array