기본 FlatList 코드에서 경고가 발생 함-기본 반응

FlatList가 작동하지 않는 것 같습니다. 이 경고가 나타납니다.

VirtualizedList : 항목에 대한 키가 누락되었습니다. 각 항목에 키 속성을 지정하거나 사용자 정의 keyExtractor를 제공하십시오.

암호:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />

간단히 이렇게하십시오 :

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    ({item}) => <Text>{item.name}</Text>
  } 
  keyExtractor={(item, index) => index.toString()}
/>

출처 : here

을 사용할 필요는 없습니다 keyExtractor. 반작용 기본 문서는 조금 불분명 하지만 key속성은 각 요소에 가야 data배열 보다는 렌더링 아이 컴퍼넌트에. 오히려

<FlatList
  data={[{id: 'a'}, {id: 'b'}]}
  renderItem={({item}) => <View key={item.id} />}
/>
// React will give you a warning about there being no key prop

이것은 당신이 기대하는 것 key입니다, data배열의 각 요소에 필드 를 넣으면 됩니다.

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <View />}
/>
// React is happy!

그리고 임의의 문자열을 키로 사용하지 마십시오.

이것은 나를 위해 일했다 :

<FlatList
  data={[{name: 'a'}, {name: 'b'}]} 
  keyExtractor={(item, index) => index.toString()}
/>

당신이 사용할 수있는

 <FlatList   
  data={[]}  
  keyExtractor={(item, index) => index.toString()} 
 />

참고 : index.toString () 사용, 즉 문자열이어야합니다.

데이터에 'ID'가 있습니다

const data = [
{
  name: 'a',
  id: 1
},
{
  name: 'b',
  id: 2
}];

<FlatList 
  data={data}
  renderItem={
    (item) => <Text>{item.name}</Text>
  } 
  keyExtractor={item => item.id}
/>

도움이 되었기를 바랍니다 !!!

간단한 해결책은로 렌더링하기 전에 각 항목에 고유 한 키를 부여하는 FlatList것입니다. 기본 VirtualizedList항목이 각 항목을 추적해야하기 때문입니다.

 users.forEach((user, i) => {
    user.key = i + 1;
 });

경고는이 작업을 먼저 수행하거나 사용자 지정 키 추출기를 제공하는 조언을 제공합니다.

이 코드는 저에게 효과적입니다.

const content = [
  {
    name: 'Marta',
    content: 'Payday in November: Rp. 987.654.321',
  },]
 
  <FlatList
      data= {content}
      renderItem = { ({ item }) => (
        <View style={{ flexDirection: 'column',             justifyContent: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: '300', color: '#000000' }}>{item.name}</Text>
      <Text style={{ color: '#000000' }}>{item.content}</Text>
        
        />
      )}
      keyExtractor={(item,index) => item.content}
    />

이것은 경고를주지 않았습니다 (인덱스를 문자열로 변환).

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  keyExtractor={(item, index) => index+"" }
  renderItem={
    (item) => <Text>{item.name}</Text>
  } 
/>

귀하의 데이터가 객체가 아닌 경우 : [실제로 각 항목 인덱스 (배열에서)를 키로 사용]

   data: ['name1','name2'] //declared in constructor
     <FlatList
  data= {this.state.data}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item, index) => index.toString()}
/>

Ray의 대답을 시도했지만 "키는 문자열이어야합니다"라는 경고가 나타납니다. 다음 수정 된 버전은 항목 자체에 고유 한 키가없는 경우 원본 및이 문자열 키 경고를 억제하는 데 효과적입니다.

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

물론 아이템 자체에 명백하고 좋은 고유 키가 있다면 그냥 사용할 수 있습니다.

그렇지 않으면 아무것도 반환하지 않는 return statement를 작성하십시오. 나와 함께 일어났습니다.

이것은 나를 위해 일했다 :

<FlatList
  data={items}
  renderItem={({ title }) => <Text>{title}</Text> }}
  keyExtractor={() => Math.random().toString(36).substr(2, 9)} />

켜기 keyExtractor로 string대신 인덱스 사용을 무작위로 생성 된 번호를 사용하는.

내가 사용했을 때 keyExtractor={(item, index) => index.toString()}, 그것은 결코 작동하지 않았으며 여전히 경고를 냈습니다. 그러나 이것은 누군가에게 효과가 있습니까?