useState 不会在数组状态上使用 push 和 pop 重新渲染

Question

我正在尝试更新使用 useState 创建的 usersData 变量，这样只要有人点击添加用户，数据对象就会添加到 usersData 的开头，但问题是它只适用于扩展运算符，而不适用使用 push、pop 或 unshift 操作，如下面的代码所示。

下面的代码运行良好，每次用户数据更改时它都会更新并重新呈现。

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    const dataUpdated = [data, ...usersData];
    setUsersData(dataUpdated);
  };

但是dataUpdated和上面的代码有相同的数据，下面的代码不会重新渲染页面。

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    let dataUpdated = usersData;
    dataUpdated.unshift(data);
    setUsersData(dataUpdated);
  };

Answer 1

第二次尝试，在下面，

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    let dataUpdated = usersData;
    dataUpdated.unshift(data);
    setUsersData(dataUpdated);
  };

不要 re-render 因为对于 React 没有任何改变，因为你给出了相同的引用（dataUpdated 和 usersData 具有相同的引用）。对象和数组，以这种方式运行，每次需要更新以拥有 re-render 时，都需要创建一个新引用。传播运算符确实创建了一个新的引用，这就是为什么你下面的第一次尝试是有效的。

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    const dataUpdated = [data, ...usersData];
    setUsersData(dataUpdated);
  };

useState 不会在数组状态上使用 push 和 pop 重新渲染

useState is not re-rendering with push and pop on an array state

javascript

reactjs

react-hooks

use-state

下面的代码运行良好，每次用户数据更改时它都会更新并重新呈现。

但是dataUpdated和上面的代码有相同的数据，下面的代码不会重新渲染页面。