ReactJS函数组件中向列表添加新项后UI未更新是什么原因？

问题根因 #

你代码的问题出在直接修改了useState返回的原状态数组，没有返回新的数组引用。
React的状态更新逻辑是：调用setState函数时，会对更新前后的状态做浅比较，如果两者的引用完全一致，React会判定状态没有发生变化，因此不会触发组件的重新渲染。
你这里用previousUsers.push(newUser)是在原数组上直接修改，之后返回的还是原来的previousUsers引用，和更新前的状态引用完全相同，所以React跳过了渲染，UI自然不会更新。

正确修改方案 #

你需要返回一个全新的数组，有两种常用写法：

写法1：扩展运算符生成新数组 #

const addNewUser = newUser => {
  setUsers(previousUsers => {
    // 仅当用户未被添加过时执行新增操作
    const existingUser = previousUsers.find(x => x.id === newUser.id);
    if (!existingUser) {
      // 基于原数组生成新数组，添加新元素
      return [...previousUsers, newUser];
    }
    // 不需要新增时直接返回原数组即可
    return previousUsers;
  });
}

写法2：先复制原数组再修改后返回 #

const addNewUser = newUser => {
  setUsers(previousUsers => {
    const existingUser = previousUsers.find(x => x.id === newUser.id);
    if (!existingUser) {
      // 先复制原数组生成新的引用
      const newUsers = [...previousUsers];
      newUsers.push(newUser);
      return newUsers;
    }
    return previousUsers;
  });
}

额外注意点 #

React的状态属于不可变数据，不要直接修改原状态，任何修改都要基于原状态生成新的引用值再返回给setter函数，才能保证触发正常的渲染流程。数组的push、pop、splice、sort、reverse等都是直接修改原数组的方法，不要直接在state的原数组上调用这些方法。

内容的提问来源于stack exchange，提问作者ololo