React中已设置key仍触发数组子元素需唯一key属性警告的问题

Hey there! Let's work through those three key prop warnings you're hitting. Even though you added a key to the <tr> elements in your tbody, there are a couple of other spots triggering the alerts, plus a potential flaw in your current key setup. Let's break this down step by step:

1. Fix the tbody row keys first (third warning) #

You're using history.date.unix().toString() as the key for your tbody rows, but this can cause duplicates if two history entries have the exact same timestamp (like actions happening in the same second). React needs absolutely unique keys for every element in an array.

Here's how to fix it:

• If your history objects have a built-in unique ID (like an id field from your API), use that directly—it's the best practice:

  <tr key={history.id}>
    <td>{history.date.format()}</td>
    <td>{history.fieldName}</td>
  </tr>
  

• If there's no unique ID, combine the timestamp with the map index to guarantee uniqueness:

  <tr key={`${history.date.unix()}-${idx}`}>
    <td>{history.date.format()}</td>
    <td>{history.fieldName}</td>
  </tr>
  

2. Resolve the thead tr warning (second warning) #

Your thead has a static <tr>, but the warning says it's part of an array/iterator. This usually happens if either:

• The <th> elements inside the tr are being generated dynamically (like if this.getResource(fieldName) returns an array of elements). If that's the case, add keys to each <th>:

  <thead>
    <tr>
      <th key="empty-header"></th>
      <th key={`field-header-${fieldName}`}>{this.getResource(fieldName)}</th>
    </tr>
  </thead>
  

• Or your entire <table> is being rendered as part of an array. To fix this, add a fixed key directly to the table element:

  this.modalBody = (
    <table key="history-table" className="table table-striped">
      {/* ... rest of the table ... */}
    </table>
  )
  

3. Fix the table-in-ModalBody warning (first warning) #

The first alert points to the table being a child of ModalBody without a key. This happens when ModalBody's children are treated as an array (even if it's just one element). The fix here is the same as above—add a unique key to your table element, like the key="history-table" example we used earlier.

Extra: Stabilize your modal's initial state #

To avoid weird edge cases when the modal toggles open/closed, set a default value for this.modalBody in your component's constructor (instead of leaving it undefined or as an array):

constructor(props) {
  super(props);
  this.showModal = false;
  // Set a default empty element with a key
  this.modalBody = <div key="empty-modal-content"></div>;
}

These changes should eliminate all three key prop warnings. Let me know if you run into any other issues!

内容的提问来源于stack exchange，提问作者Yunay Hamza