React项目中用户数据存入数组后<ul>列表未正常显示怎么办？

React组件仅在状态（state）更新时触发重新渲染，数组有数据但页面未展示的核心原因是修改数据后未触发React重渲染逻辑，对应错误写法和修正方案如下：

• 错误场景1：未用useState存储用户列表
  如果用普通的const users = []或let users = []声明数组，修改数组内容时React无法感知到变化，自然不会更新UI。
  修正方式：将用户列表声明为React状态：

  import { useState } from 'react';
  // 声明为响应式状态
  const [users, setUsers] = useState([]);
  

• 错误场景2：直接修改原state数组未返回新引用
  React对state的更新对比是浅比较，直接给原数组push数据后再把原数组传入setState，数组的内存引用没有变化，React会判定state未更新，不会触发重渲染。
  错误写法示例：

  const handleAddUser = (newUser) => {
    users.push(newUser);
    setUsers(users); // 数组引用无变化，不触发重渲染
  };
  

  正确写法示例：

  const handleAddUser = (newUser) => {
    // 基于原数组生成全新数组传入setState，触发重渲染
    setUsers(prev => [...prev, newUser]);
  };
  

• 错误场景3：用useRef存储用户列表
  useRef存储的内容变化不会触发组件重渲染，仅适合存储不需要联动UI的可变数据，如果需要数据变化同步更新UI，必须使用state存储。

如果上述场景都排查过，可以检查<ul>的列表渲染逻辑是否添加了错误的条件判断，导致列表渲染分支未执行。

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