facebook - সতর্কতা: একটি অ্যারে বা পুনরুক্তি করা প্রতিটি শিশুর একটি অনন্য "কী" প্রপস থাকা উচিত। `তালিকাভিউ` রেন্ডার পদ্ধতিটি পরীক্ষা করুন`




listview reactjs (10)

আমি আইওএস এবং অ্যান্ড্রয়েড উভয়ের জন্য একটি তালিকাভিউ সহ রিঅ্যাকটিটিভেটিভ সহ একটি অ্যাপ্লিকেশন তৈরি করেছি। বৈধ ডেটাসোর্স দিয়ে তালিকার দর্শনটি পপুলেট করার সময়, নিম্নলিখিত সতর্কতাটি স্ক্রিনের নীচে মুদ্রিত হয়:

সতর্কতা: একটি অ্যারে বা পুনরুক্তি করা প্রতিটি শিশুর একটি অনন্য "কী" প্রপস থাকা উচিত। ListView রেন্ডার পদ্ধতি পরীক্ষা করে দেখুন।

এই সতর্কতার উদ্দেশ্য কী? বার্তাটির পরে তারা এই পৃষ্ঠায় লিঙ্ক করেছে, যেখানে সম্পূর্ণ বিভিন্ন বিষয় নিয়ে আলোচনা করা হয়েছে যাগুলির সাথে দেশীয় প্রতিক্রিয়াটির সাথে কোনও সম্পর্ক নেই, তবে ওয়েব ভিত্তিক রিএ্যাকটিজগুলির সাথে।

আমার তালিকাভিউ সেই বিবৃতি দিয়ে নির্মিত:

render() {
    var store = this.props.store;

    return (

        <ListView
            dataSource={this.state.dataSource}
            renderHeader={this.renderHeader.bind(this)}
            renderRow={this.renderDetailItem.bind(this)}
            renderSeparator={this.renderSeparator.bind(this)}
            style={styles.listView}
            />

    );
}

আমার ডেটা সোর্স এ জাতীয় কিছু নিয়ে গঠিত:

    var detailItems = [];

    detailItems.push( new DetailItem('plain', store.address) );
    detailItems.push( new DetailItem('map', '') );

    if(store.telefon) {
        detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );
    }
    if(store.email) {
        detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );
    }
    detailItems.push( new DetailItem('moreInfo', '') );

    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(detailItems)
    });

এবং তালিকাগুলি-সারিগুলি যেমন:

        return (
            <TouchableHighlight underlayColor='#dddddd'>
                <View style={styles.infoRow}>
                    <Icon
                                name={item.icon}
                                size={30}
                                color='gray'
                                style={styles.contactIcon}
                                />
                    <View style={{ flex: 1}}>
                        <Text style={styles.headline}>{item.headline}</Text>
                        <Text style={styles.details}>{item.text}</Text>
                    </View>
                    <View style={styles.separator}/>
                </View>
            </TouchableHighlight>
        );

আমার কাছে সম্পূর্ণ সতর্কবাণী বলে মনে হচ্ছে এমন সতর্কতা বাদে সবকিছু ঠিকঠাক এবং প্রত্যাশার মতো কাজ করে।

আমার "বিবরণ আইটেম" -ক্লাসে কী-সম্পত্তি যুক্ত করা সমস্যার সমাধান করেনি।

এটি হ'ল "ক্লোনওথরউজ" এর ফলস্বরূপ তালিকাভিউতে আসলে কী পাস হবে:

_dataBlob: 
I/ReactNativeJS( 1293):    { s1: 
I/ReactNativeJS( 1293):       [ { key: 2,
I/ReactNativeJS( 1293):           type: 'plain',
I/ReactNativeJS( 1293):           text: 'xxxxxxxxxx',
I/ReactNativeJS( 1293):           headline: '',
I/ReactNativeJS( 1293):           icon: '' },
I/ReactNativeJS( 1293):         { key: 3, type: 'map', text: '', headline: '', icon: '' },
I/ReactNativeJS( 1293):         { key: 4,
I/ReactNativeJS( 1293):           type: 'contact',
I/ReactNativeJS( 1293):           text: '(xxxx) yyyyyy',
I/ReactNativeJS( 1293):           headline: 'Anrufen',
I/ReactNativeJS( 1293):           icon: 'fontawesome|phone' },
I/ReactNativeJS( 1293):         { key: 5,
I/ReactNativeJS( 1293):           type: 'contact',
I/ReactNativeJS( 1293):           text: '[email protected]',
I/ReactNativeJS( 1293):           headline: 'Email',
I/ReactNativeJS( 1293):           icon: 'fontawesome|envelope' },
I/ReactNativeJS( 1293):         { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] },

একটি কী হিসাবে দেখুন, প্রতিটি রেকর্ডের একটি মূল সম্পত্তি রয়েছে। সতর্কতা এখনও বিদ্যমান।


আপনাকে একটি কী সরবরাহ করতে হবে

আপনার যদি কোনও মূল সম্পত্তি থাকে তবে আপনার তালিকাভিউ সারিগুলিতে এটি করার চেষ্টা করুন:

<TouchableHighlight key={item.key} underlayColor='#dddddd'>

যদি তা না হয় তবে কেবল আইটেমটি কী হিসাবে যুক্ত করার চেষ্টা করুন:

<TouchableHighlight key={item} underlayColor='#dddddd'>

আপনার কিছুক্ষণের জন্য আমি ঠিক ঠিক একই সমস্যাটি পেয়েছি এবং উপরের কয়েকটি পরামর্শ দেখার পরে অবশেষে আমি সমস্যার সমাধান করেছি।

এটি দেখা যাচ্ছে (কমপক্ষে আমার পক্ষে যাইহোক), আমি আমার রেন্ডারসেপেটর পদ্ধতি থেকে যে উপাদানটি ফিরে আসছি তার জন্য একটি কী ('কী' নামে পরিচিত একটি প্রপ) সরবরাহ করা দরকার। আমার রেন্ডাররে বা রেন্ডারসেকশনহাইডারটিতে একটি কী যুক্ত করা কোনও কাজ করেনি, তবে এটি রেন্ডারসেপরেটারে যুক্ত করা সতর্কতাটি দূরে সরিয়ে দিয়েছে।

আশা করি এইটি কাজ করবে.


আপনি যখন আপনার তালিকার আইটেমগুলিতে কোনও কী যুক্ত করবেন না তখন এই সতর্কতাটি আসে j

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

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

কী বাছাই করার সর্বোত্তম উপায় হ'ল স্ট্রিং ব্যবহার করা যা তার ভাইবোনদের মধ্যে একটি তালিকা আইটেমটি অনন্যভাবে চিহ্নিত করে। প্রায়শই আপনি কী হিসাবে আপনার ডেটা থেকে আইডি ব্যবহার করবেন:

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

যখন আপনার রেন্ডার আইটেমগুলির জন্য স্থিতিশীল আইডি না থাকে, আপনি আইটেম সূচকটিকে শেষ অবলম্বন হিসাবে কী হিসাবে ব্যবহার করতে পারেন

<ScrollView>
      <List>
          {this.state.nationalities.map((prop, key) => {
             return (
               <ListItem key={key}>
                  <Text>{prop.name}</Text>
               </ListItem>
             );
          })}
      </List>
</ScrollView>

আমি এটি নির্দিষ্ট করতে নির্দিষ্ট কোডটি ব্যবহার করেছি:

  renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
    return (
      <View style={styles.separator} key={`${sectionID}-${rowID}`}/>
    )
  }

আমি নির্দিষ্ট কোডটি অন্তর্ভুক্ত করছি কারণ আপনার কীগুলি অনন্য হতে প্রয়োজন - এমনকি বিভাজকগুলির জন্যও। আপনি যদি অনুরূপ কিছু করেন তবে, যদি আপনি এটি একটি ধ্রুবক হিসাবে সেট করেন তবে আপনি কীগুলির পুনরায় ব্যবহার সম্পর্কে আরও একটি বিরক্তিকর ত্রুটি পাবেন। আপনি যদি জেএসএক্স না জানেন, বিভিন্ন অংশ সম্পাদনের জন্য জেএসকে কলব্যাক তৈরি করা বেশ ব্যথা হতে পারে।

এবং তালিকাভিউতে স্পষ্টতই এটি সংযুক্ত করছে:

<ListView
  style={styles.listview}
  dataSource={this.state.dataSource}
  renderRow={this.renderRow.bind(this)}
  renderSeparator={this.renderSeparator.bind(this)}
  renderSectionHeader={this.renderSectionHeader.bind(this)}/>

কোল্ড বুফেট এবং নাদের ডাবিটকে কৃতিত্ব যিনি আমাকে এই পথটি দেখিয়েছেন।


উভয় শর্ত পূরণ হয়েছে বলে মনে হচ্ছে, সম্ভবত কী ('পরিচিতি') সমস্যা

 if(store.telefon) {
    detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );
}
if(store.email) {
    detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );
}

এই যথেষ্ট জোর করা যাবে না:

কীগুলি কেবল পার্শ্ববর্তী অ্যারের প্রসঙ্গে উপলব্ধি করে

"উদাহরণস্বরূপ, আপনি যদি একটি তালিকা আইটেম উপাদান বের করেন তবে আপনার তালিকায় থাকা <li> উপাদানটির পরিবর্তে অ্যারেতে <তালিকা আইটেম /> উপাদানগুলিতে কীটি রাখা উচিত" " - https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys - https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys


চেক করুন: কী = অপরিশোধিত !!!

আপনি সতর্ক বার্তাটি পেয়েছেন:

Each child in a list should have a unique "key" prop.

যদি আপনার কোডটি সম্পূর্ণ সঠিক হয় তবে এটি যদি চালু থাকে

<MyComponent key={someValue} />

কিছু মূল্য নির্ধারিত !!! প্রথমে এটি পরীক্ষা করে দেখুন। আপনি ঘন্টা বাঁচাতে পারেন।


তালিকার রেন্ডারিং রুট উপাদানটিতে একটি প্রোপ 'কী' যুক্ত করুন।

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

যদি আপনি কোনও বিক্রিয়া অ্যাপ্লিকেশনটির জন্য <Fade in> উপাদানটি ব্যবহার করেন তবে দয়া করে এতে key={} বৈশিষ্ট্যটি যুক্ত করুন বা আপনি কনসোলে একটি ত্রুটি দেখতে পাবেন।


রেন্ডারডেটাইল আইটেম পদ্ধতিতে নিম্নলিখিত স্বাক্ষর রয়েছে বলে ধরে নিচ্ছি ...

(rowData, sectionID, rowID, highlightRow) 

এটি করার চেষ্টা করুন ...

<TouchableHighlight key={rowID} underlayColor='#dddddd'>




react-native