Trying to .add() one object to a Dexie db and two objects are getting added

Question

Here is my current code.

https://codesandbox.io/p/sandbox/compassionate-forest-pkx4wg?file=%2Fsrc%2Fcomponents%2FHomePage%2FHomePage.tsx%3A8%2C1

Reproduction Steps

1. The HomePage gives the option to "Continue an Audit" and lists all audits that currently exist in the DB, if any. It also gives the option to "Create an Audit" by selecting a checklist for the audit.
2. Select a checklist and then "Start Auditing!"; this will go to the AuditPage which should creates objects needed for a new Audit
3. Click "Home" to see that there are now two new audits. You can quickly verify that they are two new different audits by clicking on each audit link and seeing "Content for {audit.id}" under the Issues heading on the AuditPage. Also verify that there are two new audits (and other objects in associated tables) by inspecting the IndexedDB audit table.

After the new audit was created, I was redirecting the user back to the AuditPage but using the new audit_ID to verify that blank issues were getting created, displayed, etc. I thought maybe the redirecting was causing the .add()s to be processed again; so I've removed that entirely. The issue seemed to persist.

Answer 1

Thanks for a nice repro. It seems your function addAudit() in AuditPage.tsx is called twice.

I added a console.log() entry in it:

And looking at the log it is being called twice: