"고유 키"경고가 표시되지 않음

Question

현재 To-do 응용 프로그램에 대한 Mobx 자습서를 채택하고 있습니다. link 내가하고 싶은 일은 렌더링 된 각 목록 항목에 간단한 카운터 버튼을 추가하는 것입니다. 이 방법은 매우 간단 할 것이라고 생각했지만, 제대로 메쉬 할 수 없기 때문에 구문 오류가 발생했습니다. 지금 당면하고있는 주된 오류는 "배열이나 반복자의 각 자식에는 고유 한 '키'속성이 있어야합니다. 나는 각 카운터에 uuid를 추가하여이 문제를 해결할 것이라고 생각했습니다. (카운터가 오류를 일으키는 원인입니다.) 아아, 나는 해결책을 찾지 못하는 것 같다. https://github.com/Darthmaul/UmCount

구체적 this file 가장 변형을받은 사람이다 :

여기 앱의 GitHub의 저장소이다. 카운터의 저장소를 손상시키지 않는 "counterstore.js"파일도 추가했습니다.

도움을 주시면 감사하겠습니다. 이 시점에서 나는 무엇이 잘못되었고 무엇이 옳은지 알지 못합니다.

감사합니다,

앤드류

Answer 1

당신은 더 깊은에 자신의 아이들, 최상위 어린이뿐만 아니라 어린이뿐만 아니라이있을 수 있습니다 각각의 아이들의 배열을 가지고있는 구성 요소를 가질 때 수준에는 자체 키가 필요합니다.

const Items = ({items}) => (
    <View style={{flex: 1, paddingTop: 10}}> 
    {items.map((item, i) => { 
     return (<View> 
      <Text style={styles.item} key={i}>• {item} - {store.counter}</Text> 
      <Button onPress={() => store.increment()} title="+1" color="#50EB5D" key={uuid()} /> 
      </View> 
     )}) 
    } 
    </View> 
) 

을하고의 문제는 Text 및 Button 구성 요소가 키를 가지고있다, 그러나 당신의 View의하지 않습니다.

React는 조정을 위해 키를 사용하고 구성 요소 목록이 변경 될 때마다 최소 변경을 찾습니다. 여기에 키를 설정하는 방법은 배열이 변경 될 때 조정 정책에 영향을 미칩니다. 각 배열 요소에 대해 및 Button을 설정하면 그 중 하나가 변경 될 때마다 전체 행이 변경되지만 각각이 개별적으로 변경되면 각각에 대해 고유 한 ID를 생성해야합니다.

React docs on reconciliation and keys.