React 应用程序抛出关于键的错误，但我已经在顶层分配了一个唯一键

Question

Here is the code throwing the error with the console message below:

                    <div className="col-12">
                        <h6>Infractions:</h6>
                        {infractions.map(({ id, itype, dateStamp }) => (
                            <li key={id} className="col-12">
                                {itype} {dateStamp}
                            </li>
                        ))}
                    </div>

and the error

Answer 1

The error you are seeing is because the keys you have set are not unique, or undefined.

From what you have answered in the comments, you are using some kind of UUID to generate said id values. Since you haven't included that code in your question, you should probably verify the following:

• The UUIDs you are generating are indeed unique, and you are not accidentally reusing them or setting the same UUID for all records.

• The id field is always populated and React doesn't render the list with the values still undefined

To check both those suggestions, and any further investigations you may need, you have a variety of tools available.

• You can use console.log and output the values to the terminal (it's not the cleanest approach, but it gives quick results)

• You can also show the ID in the component, and see what's going on:

<li key={id} className="col-12">
  (ID: {id}) - {itype} {dateStamp}
</li>