Mã FlatList cơ bản ném Cảnh báo - React Native

FlatList dường như không hoạt động. Tôi nhận được cảnh báo này.

VirtualizedList: thiếu các khóa cho các mục, đảm bảo chỉ định một thuộc tính khóa trên mỗi mục hoặc cung cấp một keyExtractor tùy chỉnh.

Mã số:

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

Đơn giản chỉ cần làm điều này:

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

Nguồn: tại đây

Bạn không cần sử dụng keyExtractor. Các tài liệu React Native không rõ ràng một chút nhưng thuộc keytính nên đi trong từng phần tử của datamảng chứ không phải trong thành phần con được kết xuất. Vì vậy hơn là

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

đó là những gì bạn mong đợi, bạn chỉ cần đặt một keytrường trong mỗi thành phần của datamảng:

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

Và chắc chắn không đặt một chuỗi ngẫu nhiên làm chìa khóa.

Điều này làm việc cho tôi:

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

Bạn có thể dùng

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

LƯU Ý: Sử dụng index.toString () tức là dự kiến ​​là chuỗi.

Có 'id' trong dữ liệu của bạn

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

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

Hi vọng điêu nay co ich !!!

Một giải pháp đơn giản là chỉ cung cấp cho mỗi mục nhập một khóa duy nhất trước khi kết xuất FlatList, vì đó là những gì cơ bản VirtualizedListcần theo dõi từng mục.

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

Cảnh báo thực hiện lời khuyên trước, hoặc cung cấp trình trích xuất khóa tùy chỉnh.

mã này hoạt động với tôi:

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

Điều này không đưa ra bất kỳ cảnh báo nào (chuyển đổi chỉ mục thành chuỗi):

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

trong trường hợp Dữ liệu của bạn không phải là một đối tượng: [trên thực tế, nó đang sử dụng từng chỉ mục mục (trong mảng) làm khóa]

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

Đã thử câu trả lời của Ray nhưng sau đó nhận được cảnh báo rằng "khóa phải là một chuỗi". Phiên bản sửa đổi sau hoạt động tốt để loại bỏ cảnh báo khóa gốc và chuỗi này nếu bạn không có khóa duy nhất tốt trên chính vật phẩm:

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

Tất nhiên nếu bạn có một khóa duy nhất rõ ràng và tốt trên chính vật phẩm đó, bạn chỉ có thể sử dụng nó.

Hãy chắc chắn để viết tuyên bố trả lại nếu không nó sẽ trả về không có gì..Hãy làm với tôi.

Điều này làm việc cho tôi:

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

Biến keyExtractorthành một stringnhưng thay vì sử dụng chỉ mục sử dụng một số được tạo ngẫu nhiên.

Khi tôi sử dụng keyExtractor={(item, index) => index.toString()}, nó không bao giờ hoạt động và vẫn đưa ra một cảnh báo. Nhưng có lẽ điều này làm việc cho một ai đó?