React库存管理系统Axios请求出现429错误求助

问题分析 #

你的代码和场景里，429错误的触发可能来自这几个点：

1. 表单默认提交行为未阻止：按钮是type="submit"，点击时会触发表单默认提交，导致页面刷新，可能重复触发请求，甚至多次调用sendData。
2. 其他组件的重复请求：你提到已实现表格展示功能，若列表组件的GET请求未正确控制（比如useEffect未加依赖项），会导致组件每次渲染都发送请求，快速耗尽MockAPI的请求配额。
3. MockAPI本身的配额限制：MockAPI通常有严格的请求频率限制，哪怕少量重复请求也可能触发429。

修复步骤 #

1. 修复Create组件的表单提交逻辑 #

当前代码里，点击Submit按钮会触发表单默认刷新，导致不必要的请求重复。修改方式如下：

import axios from "axios";
import React, { useState } from "react";

function Create() {
  const [name, setName] = useState("");
  const [category, setCategory] = useState("");
  const [price, setPrice] = useState("");

  // 改用form的onSubmit事件处理，并阻止默认行为
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止页面刷新
    axios.post("https://63609f7caf66cc87dc1754b9.mockapi.io/IVMS", {
      name,
      category,
      price
    })
    .then(res => {
      console.log("提交成功", res);
      // 提交后清空表单
      setName("");
      setCategory("");
      setPrice("");
    })
    .catch(err => {
      console.error("请求错误", err.response); // 查看具体错误信息
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}> {/* 把事件绑定到form的onSubmit */}
        <div className="form-group"> {/* React里用className，不是class */}
          <label htmlFor="name">Product name</label>
          <input
            type="text"
            className="form-control"
            id="name"
            aria-describedby="emailHelp"
            placeholder="Product name"
            value={name} {/* 添加受控组件的value绑定 */}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label htmlFor="category">Category</label>
          <input
            type="text"
            className="form-control"
            id="category"
            placeholder="Category"
            value={category}
            onChange={(e) => setCategory(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label htmlFor="price">Price</label>
          <input
            type="text"
            className="form-control"
            id="price"
            placeholder="Price"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
          />
        </div>
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </form>
    </div>
  );
}

export default Create;

这里做了几个关键修改：

• 将请求逻辑绑定到form的onSubmit事件，并调用e.preventDefault()阻止页面刷新。
• 给Axios请求添加then/catch，捕获并打印错误详情，方便排查。
• 将class改为React规范的className，并给input添加value绑定，实现受控组件。

2. 检查其他组件的GET请求 #

如果你的列表组件（展示表格的部分）有类似这样的代码：

useEffect(() => {
  axios.get("https://63609f7caf66cc87dc1754b9.mockapi.io/IVMS");
});

没有添加依赖项[]，会导致组件每次渲染都发送GET请求，短时间内触发大量请求，直接触发429。修改为：

useEffect(() => {
  axios.get("https://63609f7caf66cc87dc1754b9.mockapi.io/IVMS")
  .catch(err => console.error("GET请求错误", err.response));
}, []); // 添加空数组依赖，只在组件挂载时请求一次

3. 处理MockAPI配额限制 #

如果已经修复了重复请求，但还是出现429，说明MockAPI的请求配额已耗尽：

• 等待一段时间（通常MockAPI的限制会在几分钟后重置）再测试。
• 更换MockAPI的端点，或者升级到付费版（如果需要更高配额）。

4. 可选：添加请求防抖/节流 #

如果有实时搜索、输入时自动保存等功能，需要给请求添加防抖，避免频繁触发：

import { useCallback, useEffect, useState } from "react";
import axios from "axios";

// 防抖函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

function SearchComponent() {
  const [keyword, setKeyword] = useState("");

  const fetchData = useCallback(debounce((keyword) => {
    axios.get(`https://example.com/api?keyword=${keyword}`)
    .then(res => console.log(res))
    .catch(err => console.error(err));
  }, 500), []);

  useEffect(() => {
    if (keyword) fetchData(keyword);
  }, [keyword, fetchData]);

  return (
    <input
      type="text"
      value={keyword}
      onChange={(e) => setKeyword(e.target.value)}
      placeholder="搜索产品..."
    />
  );
}

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