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}
/>