বেসিক ফ্ল্যাটলিস্ট কোড সতর্কতা নিক্ষেপ করে - নেটিভ প্রতিক্রিয়া জানায়

Question

ফ্ল্যাটলিস্ট কাজ করছে বলে মনে হচ্ছে না। আমি এই সতর্কতা পেতে।

ভার্চুয়ালাইজডলিস্ট: আইটেমগুলির জন্য কীগুলি নিখোঁজ রয়েছে, প্রতিটি আইটেমের উপর একটি মূল সম্পত্তি নির্দিষ্ট করতে বা একটি কাস্টম কী এক্সট্র্যাক্টর সরবরাহ করার বিষয়টি নিশ্চিত করুন।

কোড:

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

Comments

@ Li357 ... এবং ডেটা অপরিবর্তিত থাকলে অবিচল। এলোমেলো কীগুলি প্রতিটি ডেটা পরিবর্তনে প্রতিটি আইটেমকে পুনরায় রেন্ডার করতে পারে, যা খুব অকার্যকর হবে।

— জুলাই

নীচে বর্ণিত হিসাবে এটি একটি স্ট্রিং হওয়া উচিত, এখানে সরকারী রেপো উপর একটি বিচ্ছিন্নতা আছে । আমি মনে করি প্রতিক্রিয়া-নেটিভ টিম ব্যবহারকারীদেরকে কী হিসাবে সূচকটি ব্যবহার না করার জন্য সংরক্ষণ করতে চেয়েছিল তবে এটি কোনও ভাল সমাধান নয়। আমি কী হিসাবে ডিবি আইডি ব্যবহার করতে সক্ষম হব। আমি এটি একটি স্ট্রিং রূপান্তর করতে হবে না।

— পেজা

Answer 1

কেবল এটি করুন:

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

সূত্র: এখানে

Comments

{item.name work কাজ করে না। তবে {আইটেম.ইটিএম.নেম। আমার পক্ষে কাজ করেছে। হতে পারে কারণ আমি রেন্ডারআইটিমে (item আইটেম instead) এর পরিবর্তে (আইটেম) দিয়েছি। ধন্যবাদ @ রেমন্ড

— এডিসন

কারণ কোঁকড়া ধনুর্বন্ধনী। আপনি যদি কোঁকড়া ধনুর্বন্ধনী ব্যবহার করতে চলেছেন তবে আপনাকে একটি বিবরণী বিবৃতি যুক্ত করতে হবে।

— রায়

এটি কাজ নাও করতে পারে। কিছু উপাদান মুছতে এবং যুক্ত করার পরে, এটি সদৃশ আইটেমগুলি প্রদর্শন করতে শুরু করে। আমি মনে করি কী-এক্সট্রাক্টরের উদ্দেশ্য হ'ল স্বতন্ত্রভাবে কোনও আইটেম। আদর্শভাবে আপনার প্রতিটি আইটেমের জন্য একটি অনন্য আইডি থাকা উচিত এবং আইডিটি কী হিসাবে ব্যবহার করুন। উদাহরণস্বরূপ কীএক্সট্রাক্টর = {আইটেম => আইটেম.আইডি}

— জাস্টওয়ান্ডার

@ JustWonder - ডান; যদি আপনার তালিকায় আইটেমগুলি সরিয়ে ফেলা হয় তবে আপনি সূচিটি কী হিসাবে ব্যবহার করতে পারবেন না এবং প্রতিটি আইটেমের জন্য আপনাকে একটি অনন্য কী তৈরির উপায় খুঁজে পেতে হবে। কেবল যেখানে স্টাফ কেবল যুক্ত করা হয় সেই ক্ষেত্রে, এই পদ্ধতিরটি ঠিক আছে।

— জুলাইস

প্রত্যাবর্তিত সূচকটি একটি স্ট্রিং হতে হবে:keyExtractor={(item, index) => index.toString()}

— রোডেভ

Answer 2

আপনার ব্যবহারের দরকার নেই 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!

এবং অবশ্যই কী হিসাবে একটি এলোমেলো স্ট্রিং রাখবেন না।

Answer 3

এটি আমার পক্ষে কাজ করেছে:

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

Comments

বাkeyExtractor={ ( item, index ) => `${index}` }

— আইভর স্কট

Answer 4

তুমি ব্যবহার করতে পার

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

দ্রষ্টব্য: index.toString () অর্থাত্ স্ট্রিংয়ের প্রত্যাশা।

Answer 5

আপনার ডেটাতে একটি 'আইডি' রাখুন

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

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

আশাকরি এটা সাহায্য করবে !!!

Answer 6

একটি সহজ সমাধান হ'ল প্রতিটি প্রবেশের সাথে রেন্ডার করার আগে একটি অনন্য কী দেওয়া FlatList, যেহেতু VirtualizedListপ্রতিটি প্রবেশকে ট্র্যাক করার অন্তর্নিহিত প্রয়োজন needs

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

সতর্কতাটি প্রথমে এটি করার পরামর্শ দেয় বা একটি কাস্টম কী এক্সট্র্যাক্টর সরবরাহ করে।

Answer 7

এই কোডটি আমার পক্ষে কাজ করে:

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

Answer 8

এটি কোনও সতর্কতা দেয়নি (সূচকে একটি স্ট্রিংয়ে রূপান্তর করছে):

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

Answer 9

যদি আপনার ডেটা কোনও অবজেক্ট না হয়: [বাস্তবে এটি প্রতিটি আইটেম সূচক (অ্যারেতে) কী হিসাবে ব্যবহার করছে]

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

Answer 10

রায়ের উত্তর চেষ্টা করে কিন্তু তার পরে একটি সতর্কতা পেয়েছিল যে "কীটি অবশ্যই স্ট্রিং হওয়া উচিত"। নিম্নলিখিত আইটেমটি পরিবর্তিত সংস্করণটি মূল এবং এই স্ট্রিং কী সতর্কবার্তাটিকে দমন করতে ভাল কাজ করে যদি আপনার আইটেমটিতে নিজেই একটি ভাল অনন্য কী না থাকে:

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

অবশ্যই যদি আইটেমটিতে আপনার কাছে একটি সুস্পষ্ট এবং ভাল অনন্য কী থাকে তবে আপনি এটি ব্যবহার করতে পারেন।

Answer 11

রিটার্নের স্টেটমেন্টটি লিখতে ভুলবেন না তা অন্যথায় কিছুই ফিরে আসবে না ... আমার সাথে ঘটেছিল।

Answer 12

এটি আমার পক্ষে কাজ করেছে:

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

বাঁক keyExtractorএকটি মধ্যে stringকিন্তু এর পরিবর্তে সূচক ব্যবহার একটি র্যান্ডম উত্পন্ন নম্বর ব্যবহার করে করুন।

যখন আমি ব্যবহার করতাম keyExtractor={(item, index) => index.toString()}, এটি কখনই কাজ করে না এবং এখনও সতর্কবার্তা কার্যকর করে না। তবে এটি কারও পক্ষে কাজ করে?

Comments

কীগুলি অনন্য বলে মনে করা হয় rand র্যান্ডম স্ট্রিং ব্যবহার করা ভাল ধারণা নয়। উপরে উল্লিখিত হিসাবে, এটি অপ্রত্যাশিত পুনরায় রেন্ডারিং ঘটায় যেহেতু প্রতিক্রিয়া অন্য কোনও পরিবর্তনের কারণে পুনরায় রেন্ডার করার চেষ্টা করে যদি র্যান্ডম ফাংশনটি আলাদা মান দেয়।

— এডিসন ডিসৌজা

আমি শুনেছি বন্ধু আপনাকে তার জন্য ধন্যবাদ। তবে কীভাবে আপনি একটি অনন্য স্ট্রিং পাবেন, যদি আপনার 5flatlists

— হোয়াইট খরগোশ