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

Question

我正在尝试更新使用 useState 创建的 usersData 变量，以便每当有人单击“添加用户”时，都会将数据对象添加到 usersData 的开头，但问题是它仅适用于扩展运算符，不适用于推送、pop 或 unshift 操作，如下面的代码所示。

下面的代码运行良好，每次 usersData 更改时它都会更新并重新渲染:

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

您的第二次尝试，使用unshift不会导致重新渲染，因为对于React来说，没有任何改变，因为您向提供了相同的引用设置用户数据。事实上，unshift 更新内容而不影响引用；所以dataUpdated === usersData。

每次需要更新对象或数组以进行重新渲染时，您都需要创建一个新的引用。传播运算符可以做到这一点，这就是您的第一次尝试有效的原因，即:

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

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