mapを使用しているときにエラーが発生したので、その回避策を書いていきます。
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
React Create Appで作成します。
React Create Appで作成されたソースの変更
- 15行目でbootstrapをCDNで読み込んでいます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous" >
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- ブラウザをクリックしたところに四角形を描くアプリが起動します。
- 45行目でmapを利用しています。
- 36行目の仮想DOMがユニークじゃないよ。とエラーになります。
import React from 'react';
import './App.css';
class App extends React.Component {
data = []
area = {
width: "500px",
height: "500px",
border: "1px solid blue",
}
constructor(props) {
super(props)
this.state = {
list: this.data
}
}
doAction = e => {
let x = e.pageX
let y = e.pageY
this.data.push( {x:x, y:y} )
this.setState({
list:this.data
})
}
draw = d => {
let s = {
position: "absolute",
left: (d.x - 25) + "px",
top: (d.y - 25) + "px",
width: "50px",
height: "50px",
backgroundColor: "#66f3",
}
return <div style={s}></div>
}
render() {
return <div>
<h1 className="gb-primary display-4">React</h1>
<div className="container">
<p className="subtitle">Draw rectangle.</p>
<div style={this.area} onClick={this.doAction}>
{this.data.map(value => this.draw(value))}
</div>
</div>
</div>
}
}
export default Appエラー回避方法
- 45行目のmap(value)を、map(value, index)に変えて、draw関数に渡します。
- 27行目に引数を追加します。
- 36行目のdivタグにkey属性を追加します。
import React from 'react';
import './App.css';
class App extends React.Component {
data = []
area = {
width: "500px",
height: "500px",
border: "1px solid blue",
}
constructor(props) {
super(props)
this.state = {
list: this.data
}
}
doAction = e => {
let x = e.pageX
let y = e.pageY
this.data.push( {x:x, y:y} )
this.setState({
list:this.data
})
}
draw = (d, i) => {
let s = {
position: "absolute",
left: (d.x - 25) + "px",
top: (d.y - 25) + "px",
width: "50px",
height: "50px",
backgroundColor: "#66f3",
}
return <div key={i} style={s}></div>
}
render() {
return <div>
<h1 className="gb-primary display-4">React</h1>
<div className="container">
<p className="subtitle">Draw rectangle.</p>
<div style={this.area} onClick={this.doAction}>
{this.data.map((value, index) => this.draw(value, index))}
</div>
</div>
</div>
}
}
export default Appあとがき
どのDOMが変更されたか、React側から分かるようにユニークキーが必要だそう。
とりあえずmapのindexをkeyに使うようにすれば問題なさそうです。
コメントを残す