React中useEffect填充数组仅显示部分元素问题排查

核心问题分析 #

页面仅显示数组中1个元素，大概率是状态更新方式错误或渲染逻辑失误导致，结合useEffect特性，从以下方向逐一排查：

1. 状态更新是否遵循React不可变原则 #

React状态是不可变的，直接修改原数组后调用setState，React无法检测到状态变化，会导致渲染不更新。

错误示例（你的代码可能存在这类问题）：

const [arr1, setArr1] = useState([]);
const [arr2, setArr2] = useState([]);

useEffect(() => {
  // 直接修改原数组，引用未改变
  arr1.push('元素1');
  arr1.push('元素2');
  setArr1(arr1);

  arr2.push('元素A');
  arr2.push('元素B');
  setArr2(arr2);
}, []);

修复写法：

必须创建新数组，让React感知到状态变化：

useEffect(() => {
  // 方式1：直接赋值新数组
  setArr1(['元素1', '元素2']);
  setArr2(['元素A', '元素B']);

  // 方式2：在已有数组基础上追加，用展开运算符
  // setArr1(prev => [...prev, '元素1', '元素2']);
}, []);

2. 检查useEffect的依赖项 #

如果数组数据来自异步请求，要确保useEffect的依赖项包含请求触发条件，否则可能只执行一次但数据未完全加载：

// 示例：数据来自接口请求
const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/data');
    const result = await res.json();
    setArr1(result.list1);
    setArr2(result.list2);
  };
  fetchData();
}, []); // 若依赖项缺少触发更新的变量，会导致数据未正确填充

如果依赖其他状态更新数组，必须把该状态加入依赖项数组：

useEffect(() => {
  // 当userId变化时重新填充数组
  setArr1([`用户${userId}-1`, `用户${userId}-2`]);
}, [userId]); // 必须加入userId作为依赖

3. 渲染逻辑是否正确 #

确认页面渲染时是遍历整个数组，而非仅取单个元素：

错误渲染：

<div>
  <span>{arr1[0]}</span> {/* 只显示第一个元素 */}
</div>

正确渲染：

<div>
  {arr1.map((item, index) => (
    <span key={index}>{item}</span> {/* 遍历所有元素，key值需唯一 */}
  ))}
</div>

注意：用index作为key时，数组元素顺序变化可能导致渲染异常，建议用元素自身唯一标识作为key。

4. 数组是否被意外截断 #

检查useEffect中填充数组的逻辑，是否有条件判断导致只添加了一个元素：

useEffect(() => {
  const tempArr = [];
  if (someCondition) {
    tempArr.push('元素1');
  }
  // 漏写第二个元素的添加逻辑
  setArr1(tempArr);
}, []);

总结 #

优先检查状态更新是否创建了新数组，这是最常见的原因；其次排查依赖项和渲染逻辑，确保数组数据能正确触发渲染并完整展示。

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