概要
現在、TypeScript + React + Material-UIを用いた開発を行っています。
その中でオブジェクトをmap()で回して表示しているのですが、下記の様なエラーが発生いたしました。
差分表示の際にユニークなkeyを使用した方がパフォーマンスがよくなるということは理解しているのですが、何か勘違いをしているのか、中々エラーが消えてくれません。
自分なりに色々しらべてみましたが解決せず…。
どなたか解決方法のご教授よろしくお願い致します。
エラーの内容
index.js:1 Warning: Each child in a list should have a unique "key" prop.
該当するコード
import React from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import TreeView from '@material-ui/lab/TreeView'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import TreeItem from '@material-ui/lab/TreeItem'
const useStyles = makeStyles((theme: Theme) => createStyles({
toolbar: {
...theme.mixins.toolbar
},
}))
const History: React.FC = () => {
const classes = useStyles()
// historiesにはreduxのstoreから取得した、オブジェクトの配列が格納されています。
const histories = useSelector((state: any) => state.HistoryReducer.histories)
return (
<Root>
<div className={classes.toolbar} />
<H1>購入履歴</H1>
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
>
// ここです
{
histories.map((history: any, i: string) => (
<>
<TreeItem key={i} nodeId={i} label={`${history.date} ` + `${history.store.address} ` + `${history.company.name} ` + `¥${history.sum}`}>
// ここです
{history.products.map((product: any, j: string) => (
<>
<TreeItem key={j} nodeId={i} label={`${product.name} ` + `¥${product.price}`}>
</TreeItem>
</>
))}
</TreeItem>
</>
))
}
</TreeView>
</Root >
)
}
const Root = styled.div`
padding-bottom: 50px;
`
const H1 = styled.h1`
text-align: center;
`
export default History