Encountered Two Children with the Same Key – console Warning

Console Warning

Warning: Encountered two children with the same key, `…`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

此警告通常是由於在React中渲染具有相同key值的多個子元件時引發的。 每個React元素應具有唯一的key屬性，以確保React可以準確地識別和更新元件。 在Next.js頁面中，通常不應該出現相同key值的子元件，因為React會將它們視為不同的元素，可能會引發錯誤。

要解決這個警告，您需要確保在渲染子元件時使用唯一的key屬性。 在您的React元件中，檢查是否有相同key值的元件，並確保它們具有不同的key值。

範例與解決方法

例如，如果您的元件中有一個類似以下的循環：

const data = [
  { id: 1, name:'a' },
  { id: 2, name:'b' },
  { id: 1, name:'c' },
  { id: 2, name:'d' },
]

{data.map((item) => (
  <ChildComponent key={item.id} />
)}

這裡的key屬性使用了item.id，但如果data數組中的元素可能是相同的，這會導致重複的key值。 您可以嘗試使用唯一的id或其他唯一識別碼作為key值，而不是item.id。

const data = [
  { id: 1, name:'a' },
  { id: 2, name:'b' },
  { id: 1, name:'c' },
  { id: 2, name:'d' },
]

{data.map((item, index) => (
  <ChildComponent key={index} />
)}

確保key屬性具有唯一的值，以便React能夠正確地管理和更新子元件，避免重複的key值。 這樣，您就可以解決這個警告。