【React.js】Ant DesignのTable使用時にwarning: Each child in a list should have a unique “key” prop.が出た時の対処方法

  • 2023年5月9日
  • 2023年5月14日
  • React.js

こんにちは。

野中やすおです。

以前の記事で、React.jsを扱っているとしばしば遭遇する「warning: Each child in a list should have a unique “key” prop.」の対処方法について書きました。

関連記事

こんにちは。 野中やすおです。 今回の記事では、React.jsを扱っているとしばしば遭遇する「warning: Each child in a list should have a unique "key" prop.」という[…]

今回の記事では、特に私が愛用するAnt DesignのTable使用時に上記のエラーがというエラーが出ている時の対処方法について書きたいと思います。

目次

解決策

といっても対処方法は簡単で、Ant DesignのTableメソッドには「rowKeyプロパティ」という行を一意に設定するキーがあります。そのため、以下のような実装になります。

このようにrowKeyの中でgame_idというキーを設定してあげることで、warningがなくなります。

また個人的に、ReactのUIフレームワークとしてAnt Designをとても気に入っています!ぜひ皆さんも使ってみてください!