概要
現在、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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。