こんにちは。
野中やすおです。
今回の記事では、React.jsを扱っているとしばしば遭遇する「warning: Each child in a list should have a unique “key” prop.」というエラーが出ている際にAnt DesignのTable使用時の対処方法について書きたいと思います。
そもそもの原因
このWarningは、React.jsが同じリスト内にある複数の子要素に対して一意な keyプロパティを要求していることを示しています。 keyプロパティがないとReact.jsが各要素を一意に識別できなくなり、リスト内の要素が変更された場合に効率的に再レンダリングすることができなくなります。
逆にkeyがあるとReact.jsに対してどの要素とどの要素が紐づいているのかというのを知らせることができ、React.jsに最小限の更新のみをブラウザのDOMに反映することが可能になります。
なので、リストには必ずkeyを設定しよう！ということですね。
解決方法
解決方法としては、各要素に一意なkey プロパティを割り当てることです。
例えば、以下のような実装が考えられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const MyProfile = ({ name, age, hobbies }) => { return ( <div> <hr /> <div>name: {name}</div> <div>age: {age}</div> <div> <div>hobby:</div> <ul> {hobbies.map((hobby) => ( <li key={hobby}>{hobby}</li> ))} </ul> </div> </div> ); }; export default MyProfile; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import MyProfile from "./components/MyProfile"; import { useState } from "react"; const persons = [ { name: "Yasuo", age: 29, hobbies: ["syogi", "travel"], }, const Sample = () => { const [filterVal, setFilterVal] = useState(""); return ( <> <input type="text" value={filterVal} onChange={(e) => setFilterVal(e.target.value)} /> <ul> {persons .filter((person) => { const isMatch = person.name.indexOf(filterVal) !== -1; return isMatch; }) .map((person) => ( <li key={person.name}> <MyProfile {...person} /> </li> ))} </ul> </> ); }; export default Sample; |
上記のような形で、mapメソッドの中でkeyを設定してみました。
