รหัส 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()}
/>

ที่มา: ที่นี่

keyExtractorคุณไม่จำเป็นต้องใช้ React เอกสารพื้นเมืองมีความชัดเจนน้อยแต่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}

แน่นอนว่าหากคุณมีคีย์เฉพาะที่ชัดเจนและดีในไอเท็มนั้นคุณก็สามารถใช้มันได้

อย่าลืมเขียนคำสั่งคืนสินค้ามิฉะนั้นจะไม่มีอะไรกลับมา .. เกิดขึ้นกับฉัน

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

การเปลี่ยนkeyExtractorให้เป็นstringแต่แทนที่จะใช้ดัชนีให้ใช้ตัวเลขที่สร้างขึ้นแบบสุ่ม

เมื่อฉันใช้keyExtractor={(item, index) => index.toString()}มันไม่เคยได้ผลและยังคงมีคำเตือนออกมา แต่อาจจะใช้ได้กับใครบางคน?