如何用useCallback和useEffect避免React增删查数据时重复请求？

你的代码出现频繁请求的核心原因是循环触发：

• fetchParts的依赖数组包含data，每次调用setData更新数据后，fetchParts会重新创建
• 依赖fetchParts的useEffect会因此再次执行，调用fetchParts又会更新data，形成无限循环

步骤1：修正fetchParts的依赖数组 #

移除data依赖，因为回调内部并没有直接使用data，不需要将它加入依赖：

const fetchParts = useCallback(() => {
    axios
      .get("http://localhost:8090/parts/all")
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        console.error("API call error:", err.message);
      });
  }, []); // 仅保留空依赖数组，确保回调只初始化一次

步骤2：控制useEffect的触发时机 #

让useEffect仅在组件挂载时执行一次，获取初始数据：

useEffect(() => {
  fetchParts();
}, [fetchParts]); // 此时fetchParts只会初始化一次，所以effect仅执行一次

步骤3：在操作后手动调用刷新 #

在新增、删除操作完成且请求成功后，手动调用fetchParts来更新列表数据：

// 新增操作示例
const handleAdd = async (newPart) => {
  try {
    await axios.post("http://localhost:8090/parts", newPart);
    fetchParts(); // 新增成功后刷新数据
  } catch (err) {
    console.error("新增失败:", err.message);
  }
};

// 删除操作示例
const handleDelete = async (partId) => {
  try {
    await axios.delete(`http://localhost:8090/parts/${partId}`);
    fetchParts(); // 删除成功后刷新数据
  } catch (err) {
    console.error("删除失败:", err.message);
  }
};

效果说明 #

• 组件挂载时仅请求一次初始数据
• 只有在执行新增、删除操作并成功后，才会再次发送请求获取最新数据，彻底避免频繁重复请求的问题

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