Ensures unique key prop

문서 > Datadog 보안 > Code Security > Static Code Analysis (SAST) > SAST Rules > Ensures unique key prop

이 페이지는 아직 영어로 제공되지 않습니다. 번역 작업 중입니다.
현재 번역 프로젝트에 대한 질문이나 피드백이 있으신 경우 언제든지 연락주시기 바랍니다.

Metadata

ID: jsx-react/jsx-no-duplicate-key

Language: JavaScript

Severity: Error

Category: Error Prone

Description

Duplicate JSX element keys can lead to unexpected behavior. Keys should always be unique.

Non-Compliant Code Examples

[<Hello key="one" />, <Hello key="one">foo</Hello>, <Hello key="one" />];
[<Hello key={"foo"} />, <Hello key={`foo`}>foo</Hello>];
[<Hello key={a} />, <Hello key={a} />];
data.map(x => <Hello key="a" />);
data.map(x => <Hello key={1}>{x}</Hello>);
data.map(x => <Hello key={"1" + "2"}>{x}</Hello>);
data.map(x => { return <Hello key={true}>{x}</Hello>});
data.map(function(x) { return <Hello key={[]}>{x}</Hello>});
Array.from([1, 2, 3], (x) => <Hello key={{}}>{x}</Hello>);

Compliant Code Examples

[<Hello key="first" />, <Hello key="second">foo</Hello>, <Hello key="third" />];
data.map(x => { return <Hello key={`prefix-${x}`}>{x}</Hello>});