고유 ID가없는 항목에 대해 예측 가능한 반응 키를 생성하려면 어떻게해야합니까?

Question

때로는 고유 한 ID없이 컬렉션을 매핑합니다. 이 경우 react가이 경고를 콘솔에 기록합니다. Each child in an array or iterator should have a unique "key" prop.이 문제를 해결하기 위해 다음 es6 모듈을 만들었습니다.

const key = { 
    count: 0, 
    getKey:() => { 
    key.count += 1; 
    return key.count; 
    }, 
}; 
export default key; 

지금, 나는 나의 반작용 응용 프로그램 전반에 걸쳐 key 모듈을 수입하고 나는 고유 키를 필요로 할 때 그 getKey 메소드를 호출합니다. 그러나 React advises처럼 예측할 수있는 키가 생기지는 않습니다. 첫 번째 렌더링은 1-10 키를 사용하여 컬렉션을 매핑 할 수 있지만 나중에 렌더링하면 해당 요소에 대한 새 키가 생성됩니다. UUID과 같은 패키지를 사용하면 동일한 효과가 있습니까? 예측 가능한 반응 키를 생성하는 적절한 방법은 무엇입니까? 그들이 예측할 수있는 것을 오해하고 있습니까? 감사!

Answer 1

당신은 당신이 사용할 수있는 임의의 ID에 대해 ... 또는 (권장하지 않는) 임의의 데이터를 사용할 수 있습니다 new Date().getTime() 구성 요소를 재사용하는데 키가 사용됩니다 ... 동일한 항목에 대해 동일한 키를 제공하는 것이 중요합니다 구성 요소를 렌더링

[].map(item, index) => <Item key={'this_list_specific_name' + item.id} /> 

Answer 2

키를 생성

전에 예측 가능한 사람으로 끝낼 수있는 가장 좋은 방법입니다.

이상적인 세계에서는 이미 고유 한 ID가있는 개체 목록을 사용하게되며 이러한 경우 해당 ID를 키로 사용하는 것이 가장 좋습니다.

중복을 포함 할 수있는 숫자 목록을 렌더링하는 경우 렌더링 할 구성 요소에 전달하기 전에 각각 고정 키를 제공 할 수 있습니다.

let numbers = [1, 1, 2, 3]; 

let numbersWithKeys = numbers.map(x => { 
    return { value: x, key: key.getKey() }; 
}); 

function Numbers({ numbers }) { 
    return (
    <ul> 
    {numbers.map(number => <li key={number.key}>{number.value}</li>)} 
    </ul> 
) 
} 

render(
    <Numbers numbers={numbersWithKeys} /> 
); 

구성 요소가 렌더링 될 때마다 각 숫자에 대해 동일한 키를 안전하게 사용할 수 있습니다. 이 구성 요소는 다음과 같은 가상 트리를 렌더링 상상할 수있는 다음 <Numbers> 구성 요소 목록을 반대하고 당신은 여전히 ​​각 항목에 대해 동일한 키와 끝장을 위해

<ul> 
<li key={1}>1</li> 
<li key={2}>1</li> 
<li key={3}>2</li> 
<li key={4}>3</li> 
</ul> 

그것은 가능할 것이다. 그것이 바로 React가 예측할 수있는 것입니다.

React는 전체 요소를 다시 렌더링하지 않고 렌더링 된 요소를 이동하여 목록의 순서를 변경할 때 성능 단축키를 만들 수 있지만 렌더링 메서드 내에서 키를 생성하는 경우에는 매번 아주 새로운 목록이며 모든 것을 다시 렌더링해야합니다.