如何向JSON文件添加数据？解决组件与JSON Server无限渲染问题

问题根源 #

组件和JSON Server出现无限渲染的核心原因是**useEffect的依赖数组中包含了userDetail**：每次调用setUserDetail(res)更新状态时，userDetail的引用会发生变化，触发useEffect重新执行；而useEffect里又会再次调用getUser()并更新userDetail，最终形成无限循环。

修复步骤 #

1. 修正useEffect的依赖数组

将useEffect的依赖改为空数组，确保它只在组件挂载时执行一次，切断循环触发的源头：

const [userDetail, setUserDetail] = useState<Iuser[]>([]);
useEffect(() => {
  getUser().then((res: any) => {
    setUserDetail(res);
  });
}, []); // 空数组表示仅在组件挂载时执行一次

2. 添加数据成功后手动更新UI

为了让新添加的用户实时显示在界面上，需要在handleClick的POST请求成功后，主动重新获取用户列表并更新状态：

async function handleClick() {
  setIsPending(true);
  try {
    // 发送POST请求添加新用户
    await fetch("http://localhost:3006/customers", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      mode: "cors",
      body: JSON.stringify(addList),
    });
    console.log("新用户已添加");
    // 重新获取用户列表更新UI
    const updatedUsers = await getUser();
    setUserDetail(updatedUsers as Iuser[]);
  } catch (error) {
    console.error("添加用户失败:", error);
  } finally {
    setIsPending(false);
  }
}

额外优化建议 #

给getUser函数添加明确的类型定义，避免any类型带来的潜在问题：

import axios from "axios";
import { Iuser } from "./你的类型文件路径";

export async function getUser(): Promise<Iuser[]> {
  try {
    const res = await axios.get("http://localhost:3006/customers");
    return res.data;
  } catch (err) {
    console.log(err);
    return []; // 出错时返回空数组，避免状态异常
  }
}

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