search

gihyo-book / ts-nextbook-app

TypeScriptとReact/Next.jsでつくる実践Webアプリケーションの第5章から6章までのコード
https://gihyo.jp/book/2022/978-4-297-12916-3
170 stars 91 forks source link

keyの警告が表示される #21

Open shinriyo opened 1 year ago

shinriyo commented 1 year ago

npm run devコマンドを実行後にアクセスすると以下のWarningがあります。 これは同じ階層のコンポーネント同士でkeyプロパティを設定してないことによるものです。

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:294:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:260:106)
    at MyDocument (webpack-internal:///./src/pages/_document.tsx:14:1)

例ですが、以下のように<Nav>``<NavLink>にてユニークなkeyを設定することで非表示にできます。

<Nav key="nav2" as="nav" height="56px" alignItems="center">
<NavLink key="navlink3">