在React中如何向useState管理的数组动态追加新数据

核心修改逻辑 #

原代码每次调用setData时直接传入新获取的接口返回结果，会直接覆盖原有数组，仅需改为合并旧数组和新返回的数组即可实现追加效果。
React中如果状态更新依赖之前的状态，推荐使用函数式更新写法，能保证拿到的上一次状态是最新值，避免闭包陷阱。

修改后完整代码 #

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [data, setData] = useState([]);
  // 可选：新增加载状态防止重复点击
  const [loading, setLoading] = useState(false);

  const handleFetch = () => {
    setLoading(true);
    fetch("https://www.randomuser.me/api")
      .then((response) => response.json())
      .then((res) => {
        // 核心修改：展开旧数组，追加新数据
        setData(prevData => [...prevData, ...res.results]);
      })
      .finally(() => {
        setLoading(false);
      });
  }

  const information = data.map((details, index) => {
    // 新增key避免React渲染警告，实际项目建议用用户唯一id替代index
    return (
      <div key={index}>
        <h1> {details.name.title} </h1> 
        <h1> {details.name.first} </h1>
        <h1> {details.name.last} </h1>
        <img src={details.picture.large} alt={`${details.name.first} avatar`}/>
      </div>
    )
  })

  return (
    <div className="App">
      <button onClick={handleFetch} disabled={loading}>
        {loading ? "加载中..." : "获取新用户信息"}
      </button>
      <div>{information}</div>
    </div>
  );
}

关键调整说明 #

• 核心逻辑为setData(prevData => [...prevData, ...res.results])：通过函数式更新拿到上一次的prevData，用扩展运算符把旧数组的所有元素和新返回的res.results元素合并为新数组赋值给state，即可实现追加而非覆盖的效果。
• 新增loading状态，请求过程中禁用按钮，避免用户重复点击发起多次无效请求。
• 给map遍历生成的元素新增key属性、给img标签新增alt属性，解决React原生警告问题，符合开发最佳实践。

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