ফ্ল্যাটলিস্টটি কীভাবে পুনরায় রেন্ডার করবেন?

Question 1

লিস্টভিউয়ের বিপরীতে আমরা এই.স্টেট.ডেটাসোর্স আপডেট করতে পারি। ফ্ল্যাটলিস্ট আপডেট বা পুনরায় রেন্ডার করার জন্য কি কোনও পদ্ধতি বা উদাহরণ রয়েছে?

আমার লক্ষ্যটি যখন ব্যবহারকারীদের বোতাম টিপুন তখন পাঠ্য মানটি আপডেট করা ...

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

Question 2

extraDataআপনার ফ্ল্যাটলিস্ট উপাদানটিতে সম্পত্তিটি ব্যবহার করুন ।

নথি হিসাবে বলা হয়েছে:

পাস extraData={this.state}করার মাধ্যমে FlatListআমরা নিশ্চিত হয়েছি FlatListযে state.selectedপরিবর্তনগুলি যখন নিজেকে পুনরায় রেন্ডার করবে । এই প্রপ সেট FlatListনা করে , এটি কোনও আইটেমকে পুনরায় রেন্ডার করতে হবে তা জানতেন না কারণ এটিও একটি PureComponentএবং প্রপসের তুলনাটি কোনও পরিবর্তন দেখায় না।

Question 3

দ্রুত এবং সহজ সমাধানের জন্য চেষ্টা করুন:

একটি বুলিয়ান মান অতিরিক্ত তথ্য সেট করুন।

অতিরিক্তডাটা = {this.state.refresh resh
আপনি পুনরায় রেন্ডার / তালিকা রিফ্রেশ করতে চাইলে বুলিয়ান রাষ্ট্রের মান টগল করুন
```
this.setState({ 
    refresh: !this.state.refresh
})
```

Question 4

ওহ এটি সহজ, কেবল ব্যবহার করুন extraData

আপনি দেখতে পাচ্ছেন যে অতিরিক্ত ডেটা পর্দার আড়ালে কাজ করে তা হ'ল ফ্ল্যাটলিস্ট বা ভার্চুয়ালাইজডলিস্ট কেবলমাত্র ওয়েদারকে পরীক্ষা করে যা কোনও সাধারণ onComponentWillReceivePropsপদ্ধতির মাধ্যমে বস্তুটি পরিবর্তিত হয়েছিল ।

সুতরাং আপনাকে যা করতে হবে তা হ'ল নিশ্চিত করুন যে আপনি এমন কিছু দিয়েছেন যা এর পরিবর্তিত হয় extraData।

আমি যা করি তা এখানে:

আমি অপরিবর্তনীয়.জেএস ব্যবহার করছি তাই আমি যা করি তা হ'ল আমি একটি মানচিত্র (অপরিবর্তনীয় বস্তু) পাস করি যা আমি যা দেখতে চাই তা ধারণ করে।

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

এইভাবে, কখন this.props.fooবা this.props.barপরিবর্তন CustomComponentRowহবে , আমাদের আপডেট হবে, কারণ অপরিবর্তনীয় বস্তু আগেরটির চেয়ে আলাদা হবে।

Question 5

ঠিক আছে I

<FlatList data={...} extraData={this.state} .../>

এখানে দেখুন: https://facebook.github.io/react-native/docs/flatlist#extradata

Question 6

আপনি যদি একটি বাটন রাখতে চলেছেন তবে আপনি অনপ্রেসের অভ্যন্তরে সেটস্টেটের সাহায্যে ডেটা আপডেট করতে পারেন। সেটস্টেট তারপরে আপনার ফ্ল্যাটলিস্টকে পুনরায় রেন্ডার করবে।

Question 7

প্রচুর অনুসন্ধান এবং বাস্তব উত্তর সন্ধানের পরে অবশেষে আমি উত্তর পেয়েছি যা আমি মনে করি এটি সেরা:

       <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      ItemSeparatorComponent={this.renderSeparator}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={1}
      extraData={this.state.data}
      removeClippedSubviews={true}
      **keyExtractor={ (item, index) => index }**
              />
    .....

আমার মূল সমস্যাটি ছিল (কীেক্সট্র্যাক্টর) আমি এটি এটি ব্যবহার করছিলাম না। কাজ করছে না: কী এক্সট্রাক্টর = {(আইটেম) => আইটেম.আইডি i আমি এতে পরিবর্তিত হওয়ার পরে এটি মনোমুগ্ধকর মতো কাজ করেছে আশা করি আশা করি এটি কাউকে সাহায্য করবে।

Question 8

পূর্ববর্তী উত্তরের এখানে কেবল একটি এক্সটেনশন। দুটি অংশ নিশ্চিত করার জন্য, আপনি অতিরিক্ত ডেটা যুক্ত করেছেন এবং আপনার কী-এক্সেক্টরেক্টরটি অনন্য sure যদি আপনার কী-এক্সট্রাক্টর স্থির থাকে তবে একটি রিরেন্ডার ট্রিগার হবে না।

<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
                                    </FlatList>

Question 9

আমি আরও যুক্ত করার extraData={this.state}জন্য নীচের কোডটি চেক করে যুক্ত করে এই সমস্যার সমাধান করেছি

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.arr}
          extraData={this.state}
          renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        />
      </View>
    );
  }

Question 10

আমি এর FlatListসাথে প্রতিস্থাপন করেছি SectionListএবং এটি রাষ্ট্র পরিবর্তন সম্পর্কে সঠিকভাবে আপডেট।

<SectionList
  keyExtractor={(item) => item.entry.entryId} 
  sections={section}
  renderItem={this.renderEntries.bind(this)}
  renderSectionHeader={() => null}
/>

একমাত্র জিনিসটি মনে রাখা দরকার যেগুলি sectionবিভিন্ন কাঠামোযুক্ত:

const section = [{
  id: 0,
  data: this.state.data,
}]

Question 11

আমার জন্য, কৌশলটি অতিরিক্ত ডেটা ছিল এবং আইটেমের উপাদানটিতে আরও একবার ড্রিল করা হয়েছিল

state = {
  uniqueValue: 0
}

<FlatList
  keyExtractor={(item, index) => item + index}
  data={this.props.photos}
  renderItem={this.renderItem}
  ItemSeparatorComponent={this.renderSeparator}
/>

renderItem = (item) => {
  if(item.item.selected) {
    return ( <Button onPress={this.itemPressed.bind(this, item)}>Selected</Button> );
  }
  return ( <Button onPress={this.itemPressed.bind(this, item)}>Not selected</Button>);
}

itemPressed (item) {
  this.props.photos.map((img, i) => {
    if(i === item.index) {
      if(img['selected') {
        delete img.selected;
      } else {
        img['selected'] = true;
      }
      this.setState({ uniqueValue: this.state.uniqueValue +1 });
    }
  }
}

Question 12

ভেরিয়েবলগুলি রাখুন যা আপনার ইন্টারঅ্যাকশন দ্বারা পরিবর্তিত হবে extraData

আপনি সৃজনশীল হতে পারেন।

উদাহরণস্বরূপ, যদি আপনি সেগুলিতে চেকবক্সগুলির সাথে পরিবর্তিত তালিকার সাথে সম্পর্কিত হন।

<FlatList
      data={this.state.data.items}
      extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
      renderItem={({item}) => <View>

Question 13

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

const hasPropOrStateChange = { propKeyToWatch: this.props, ...this.state};
<FlatList data={...} extraData={this.hasPropOrStateChange} .../>

দস্তাবেজ: https://facebook.github.io/react-native/docs/flatlist#extradata

Question 14

প্রতিক্রিয়া-নেটিভ-ফ্ল্যাটলিস্টে, এগুলি অতিরিক্ত সম্পত্তি হিসাবে পরিচিত একটি সম্পত্তি D আপনার ফ্ল্যাটলিস্টে নীচের লাইনটি যুক্ত করুন।

 <FlatList
          data={data }
          style={FlatListstyles}
          extraData={this.state}
          renderItem={this._renderItem}
       />

Question 15

এই উদাহরণে, পুনরায় রেন্ডার করতে বাধ্য করতে, কেবল পরিবর্তনশীল পরিবর্তন করুন able machine

const [selected, setSelected] = useState(machine)

useEffect(() => {
    setSelected(machine)
}, [machine])

Question 16

শুধু ব্যবহার করুন:

onRefresh={true}

আপনার flatListউপাদান ভিতরে ।

Question 17

ফ্ল্যাটলিস্টের এক্সট্রাটাটা আমার জন্য কাজ করছিল না এবং আমি ঘটনাকে রিডুএক্স থেকে প্রপ ব্যবহার করছিলাম। এটি ED209 এর উত্তরের মন্তব্যগুলিতে সমান মনে হয়েছিল। আমি যখন প্রপসটি পেয়েছি তখন আমি ম্যানুয়ালি সেটস্টেট কল করে শেষ করেছি।

componentWillReceiveProps(nextProps: StateProps) {
    if (this.props.yourProp != null && nextProps.yourProp) {
        this.setState({ yourState: processProp(nextProps.yourProp) });
    }
}


<FlatList
  data={this.state.yourState}
  extraData={this.state.yourState}
/>

আপনারা যারা ব্যবহার করছেন> 17 প্রতিক্রিয়া ব্যবহারের জন্য getDerivedStateFromProp ব্যবহার করুন