React触发EF向数据库新增数据时出现重复条目问题

First, let's break down why your Export controller is getting hit twice (and causing duplicate database entries)—this is a super common issue, and there are a few likely culprits to check:

1. Frontend is sending duplicate requests #

Even if you think your React code is solid, hidden triggers can cause duplicate POST calls. Start here because this is the most frequent cause:

• Check browser DevTools: Fire up F12, go to the Network tab, and trigger the export action. If you see two POST requests to /api/Export, the problem is definitely on the frontend.
• Common React pitfalls:
  • useEffect dependencies updating unexpectedly: If your export request is triggered in a useEffect hook, double-check the dependency array. If selectedEntityId or selectedDate gets updated twice (e.g., from state initialization or a parent component re-render), it will fire the request twice.
  • Missing loading state guard: If the user clicks the export button quickly twice (or the component re-renders while the request is in flight), the request will run again. Add a loading state to block duplicate calls:

    const [isExporting, setIsExporting] = useState(false);
    
    const handleExport = async () => {
      if (isExporting) return;
      setIsExporting(true);
      try {
        await axios.post("/api/Export", { selectedEntityId, selectedDate });
        // Success logic
      } catch (err) {
        // Error handling
      } finally {
        setIsExporting(false);
      }
    };
    

  • Accidental double event bindings: Make sure your export button isn't bound to onClick twice (e.g., once in the component and once via a parent prop).

2. Browser automatic retries #

If your first request times out, returns a vague error (like 5xx), or the browser doesn't get a clear response, some browsers will automatically retry POST requests. To fix this:

• Ensure your controller returns a response quickly: Check if any heavy processing in _export.Export(userId) is delaying the Ok() response.
• Add idempotency to your backend: Generate a unique request ID on the frontend, pass it to the controller, and check if that ID has already been processed before inserting into the database. Example:

  [Route("api/Export", Order = -1)]
  [HttpPost]
  public IHttpActionResult Export(int? selectedEntityId, DateTime? selectedDate, string requestId) {
      // Check if requestId exists in ExportFiles or a separate audit table
      if (_db.ExportFiles.Any(e => e.RequestId == requestId)) {
          return Ok("Request already processed");
      }
      // Rest of your code, save requestId with the export record
  }
  

3. Backend routing or middleware conflicts #

If the Network tab shows only one request but your controller logs show two calls, the issue is in your backend setup:

• Check for duplicate routes: Make sure no other controller action matches the api/Export POST route. For example, another controller with [Route("api/Export")] and [HttpPost] could cause routing ambiguity (even with Order = -1, conflicts can occur in rare cases).
• Add logging to confirm calls: Insert a log statement at the start of your controller action to track when it's invoked. This will confirm if the controller is truly being called twice:

  private static readonly ILogger _logger = LogManager.GetLogger(typeof(YourControllerName));
  
  [Route("api/Export", Order = -1)]
  [HttpPost]
  public IHttpActionResult Export(int? selectedEntityId, DateTime? selectedDate) {
      _logger.Info($"Export controller invoked at {DateTime.UtcNow} with ID: {selectedEntityId}, Date: {selectedDate}");
      // Rest of your code
  }
  

• Inspect middleware: Check your Startup.cs (or Program.cs for .NET Core) to ensure no custom middleware is accidentally re-forwarding the request. For example, a logging or authentication middleware that incorrectly calls await next(context) twice.

4. IIS/host configuration issues #

Rarely, IIS settings can cause duplicate request processing:

• Disable HTTP keep-alive temporarily to rule out connection reuse issues.
• Check if your application pool is set to recycle frequently, which could cause partial request retries.

Start with the frontend DevTools check—it's the fastest way to narrow down the root cause. Most of the time, adding a loading state guard to your React component will fix the duplicate requests.

内容的提问来源于stack exchange，提问作者B--rian