-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
map함수 key질문입니다.
20.08.17 00:31 작성 조회수 106
0
render() {
const { title, color, className, trys } = this.state;
return (
<>
<div
ref={this.divRef}
id="screen"
className={className}
style={{ background: color }}
onClick={this.onClick}
>
{title}
</div>
<ResultTable trys={trys} />
</>
);
}
class ResultTable extends Component {
averageResult = (trys) => {
let sum = 0;
trys.forEach((v) => {
sum = sum + v.record;
});
return sum / trys.length;
};
printResult = () => {
const { trys } = this.props;
if (trys.length === 0) {
return;
} else {
return (
<>
<ul>
<div style={{ fontSize: "30px" }}>Result</div>
{trys.map((v, i) => {
return (
<>
<li key={v.id}>{`${i + 1}차 결과 : ${v.record}ms`}</li>
</>
);
})}
<div>{`평균 : ${this.averageResult(trys)}ms`}</div>
</ul>
</>
);
}
};
render() {
return <>{this.printResult()}</>;
}
}
부모 컴포넌트에서 자식 컴포넌트 (ResultTable)을 불러와서 map으로 그려주는 함수입니다.
분명히 key값을 넣어줬데 계속해서 key에러가 뜨는데 왜 그런지 알 수 있을까요?
trys= [
{id: trys.length + 1, record: time}
]
이런식으로 trys는 구성되어있습니다.
답변을 작성해보세요.
0
답변 1