기본 키 반응 - 플랫리스트와 함께 키 추출기 사용

기본 키 반응 - 플랫리스트와 함께 키 추출기 사용

지금까지 다음과 같은 내용을 받아왔다.

"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"

꽤 혼란스럽군... 내가 지나가는 배열이 배열에 있는 각 객체에 정의된 핵심 속성을 가지고 있어.나는 이 주(州)에서 그 배열을 정의하고 있다.콘솔에서 빠른 인쇄를 실행해 보았더니: 배열에서 인쇄

배열의 각 개체는 다음과 같이 정의된다.

  var obj = {key: doc.id, value: doc.data()};

(doc 및 데이터는 내 앱의 다른 부분에 있지만, 나는 doc.id이 독특하다는 것을 알고 있다)

몇 번 구글링을 한 후에 나는 다음과 같이 키 추출기를 정의하려고 했다.

_keyExtractor = (item, index) => item.key;

내 플랫리스트 정의는 다음과 같다.

  <FlatList
        style={{}}
        data={this.state.FeedDataCollection}
        keyExtractor={this._keyExtractor}
        renderItem={(rowData) =>this.RenderFeedCard(rowData)}
      />

여전히 같은 오류를 받고 있지만, 이 시점에서 이 문제를 어떻게 다루어야 할지, 무엇을 잘못하고 있는지 정말로 확신할 수 없다.아이디어 있으십니까?정말 고마워!

"VirtualizedList: 항목에 대한 키 누락, 항목에 대한 키 속성을 지정하거나 사용자 지정 키Extractor 제공"

리스트의 요소들이 누락된 키라는 경고다.이러한 고유한 키는 VirtualizedList(FlatList가 구축된 것)를 통해 항목을 추적할 수 있으며 효율성 측면에서 매우 중요하다.

키 소품 같은 독특한 키 소품들을 골라야 할 것이다.id또는 aemail.

그keyExtractor다시 사용하게 되다.index결석하여그러나 그 경고는 여전히 가시적으로 남아 있을 것이다.

예: 다음과 같이 정의된 개체{key: doc.id, value: doc.data()}추출기에 다음과 같이 사용할 수 있다.

keyExtractor={(item, index) => item.key}

플랫 목록 구성 요소는 다음과 같아야 한다.

<FlatList
  style={{}}
  data={this.state.FeedDataCollection}
  keyExtractor={(item, index) => item.key}
  renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>

이렇게 하고 나를 위해 일한다.

keyExtractor={(item, index) => 'key'+index}

이 오류의 중요성은 해당 키를 제공하지 않을 경우 목록이 업데이트되는 방법 때문에 어레이의 개체를 변경하거나 삭제하기 시작하는 시점이다.

React Native가 키 없이 목록 변경을 처리하는 방법은 화면에 보이는 모든 항목을 삭제한 다음 새로운 데이터 배열을 보고 각 항목에 대해 단일 요소를 렌더링하는 것이다.

우리는 데이터 배열에 대한 하나의 작은 변화 때문에 전체 목록을 재구축하는 Ract Native를 원하지 않는다.이상적으로는 React Native가 우리가 삭제했거나 변경한 객체를 구체적으로 감지하여 그에 따라 업데이트하기를 원하지만, 키를 제공하지 않으면 그렇게 되지 않는다.

키 속성은 Ract Native가 이러한 객체 목록을 추적할 수 있도록 하며, 그렇게 하면 수정 또는 삭제 중인 내용을 추적하고 특정 키로 특정 요소를 삭제할 수 있다.

이렇게 하면 리스트를 처음부터 다시 작성할 필요가 없다.키는 Resact Native가 데이터 객체의 정의를 화면에 나타나는 일부 요소와 연결할 수 있도록 한다.

React Native(원본 반응)만 허용하면 화면에 렌더링하는 여러 개체 목록을 추적할 수 있다.그것은 또한 우리의 목록을 업데이트하는 것에 대한 성능 최적화 입니다.

@Sarantis Tofas는 정답을 가지고 있다.날 위해 해결했어!코멘트를 기반으로 한 두 개의 추가 참고 사항:

1. 인덱스를 사용할 경우 index.toString()을 사용하십시오. 그렇지 않으면 다른 경고(실패한 자식 컨텍스트 유형 - Type number to CellRender expected 문자열에 제공됨).
2. FlatList는 키 속성이나 키Extractor가 정의되지 않은 경우 기본적으로 인덱스와 함께 작동하지만, 경고를 발생시킨다.

리액션 네이티브를 위한 최고의 고유 키 추출기

함수 모양:

  keyExtractor = item => {
    return item.id.toString() + new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

또는 항목 필드 없음:

  keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

사용 시도listkey대신에keyExtractor그것은 나에게 효과가 있었다.

실제로 나의 경우 FlatList 데이터 프로펠러 값이 어레이 유형이 아니므로(빈 개체임) 추가하면keyExtractor={(item, index) => item.key}그것은 실수를 했다.

너에게 도움이 되었으면 좋겠어.

이것은 확실히 효과가 있을 것이다.먼저 임의의 숫자를 생성하십시오.

let generateRandomNum = () => Math.floor(Math.random() * 1001);

난수생성이 필요한 곳에 전화하십시오.예를 들어 :-

{ id: generateRandomNum().toString(), value: 'your value'}

//더 나은 이해를 위해 코드의 작은 부분을 공유함

const addGoalHandler = enteredInputGoal => {
console.log('random nub', generateRandomNum());
setCourseGoals(courrentGoals => [...courrentGoals, { id: generateRandomNum().toString(), value: enteredInputGoal }]);
  };

마지막으로 플랫리스트에서 사용

<FlatList keyExtractor={(item, index) => item.id} data={courseGoals} renderItem={itemData =>itemData.item.value } />

Keyextractor={(항목, 색인) => 'key'+index}이(가) 내게 효과가 있었다.

keyExtractor ={(item, index) => \${reason.key}${index}}이 일은 내게 효과가 있었어끈을 연결할 필요 없음

참조URL: https://stackoverflow.com/questions/47953662/react-native-use-a-keyextractor-with-flatlist