फ्लैटलिस्ट को फिर से कैसे प्रस्तुत करें?

Question

ListView के विपरीत हम इसे अपडेट कर सकते हैं ।state.datasource। क्या फ़्लैटलिस्ट को अद्यतन करने या इसे फिर से प्रस्तुत करने के लिए कोई विधि या उदाहरण है?

मेरा लक्ष्य उपयोगकर्ता द्वारा बटन दबाते समय पाठ मान को अद्यतन करना है ...

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

Comments

FlatList के लिये दस्तावेज कहते हैं कि "यह एक है PureComponentजिसका अर्थ है कि यह नहीं फिर से प्रस्तुत करना होगा, अगर सहारा shallow- बराबर रहते हैं। सुनिश्चित करें कि सब कुछ अपने बनाओ renderItemसमारोह पर एक प्रोप कि नहीं है के रूप में पारित हो जाता है निर्भर करता है ===अपडेट के बाद, अन्यथा आपके यूआई अद्यतन नहीं हो सकता परिवर्तनों पर। इसमें dataप्रोप और पैरेंट घटक स्थिति शामिल है। " क्या आप इस सलाह का पालन कर रहे हैं?

— जॉर्डन

कोई फर्क नहीं पड़ता कि मैंने क्या कोशिश की extraDataऔर shouldItemUpdate, मैं सूची को फिर से प्रस्तुत करने के लिए नहीं मिला। मैंने जो किया वह समाप्त हो गया और राज्य को मंजूरी दे दी गई, इसके लिए इंतजार करना और फिर राज्य को अद्यतन करना। this.setState({ data: null }, () => { this.setState({ data: actualData }) });

— जोशुआ पिन्टर

Answer 1

extraDataअपने फ़्लैटलिस्ट घटक पर संपत्ति का उपयोग करें ।

प्रलेखन के अनुसार:

पास करके extraData={this.state}करने के लिए FlatListहम यह सुनिश्चित करना FlatListहोगा खुद को फिर से प्रस्तुत करना है जब state.selectedबदल जाता है। इस प्रॉप को सेट किए बिना, FlatListयह नहीं पता होगा कि इसे किसी भी आइटम को फिर से प्रस्तुत करने की आवश्यकता है क्योंकि यह भी एक है PureComponentऔर प्रोप तुलना किसी भी बदलाव को नहीं दिखाएगी।

Comments

मैं Redux का उपयोग कर रहा हूं और उस स्थिति में जैसे डेटा भेज रहा हूं data={this.props.searchBookResults}और न extraData={this.state}ही extraData={this.props}मेरे लिए काम कर रहा है। और data={this.props.searchBookResults}काम भी नहीं कर रहा है। क्या करें ?

— सुजीत

एक्सट्राडाटा का प्रयोग करें: ... data={this.props.searchBookResults} extraData={this.state.refresh} onPress={()={this.setState({ refresh: !refresh})}

— नाय

मैं उसी समस्या से जूझ रहा हूं। इससे कोई फर्क नहीं पड़ता कि मैं क्या पास करता हूं extraData, घटक अपडेट नहीं करता है :(

— डेनिस कपेलिनी

@DenisCappelini, सुनिश्चित करें कि डेटा उस extraDataपरिवर्तन में पारित हो गया है जब चाइल्ड आइटम [s] को फिर से प्रस्तुत करना होगा। उदाहरण के लिए, यदि सूची आइटम सक्रिय / निष्क्रिय हो सकते हैं, तो सुनिश्चित करें कि स्थिति चर, this.stateवस्तु या this.propsवस्तु का हिस्सा है जो अंदर जाना चाहिए extraData। यह एक कर्सर या सक्रिय वस्तुओं की एक सरणी हो सकती है, आदि

— सम्राट_अर्थ

@ मैं उसी मुद्दे पर चल रहा था, लेकिन तब मुझे महसूस हुआ कि मैंने इसे लागू कर दिया है shouldComponentUpdate(), एक बार जब मैंने इसे अपडेट किया या पूरी तरह से टिप्पणी की, तो चीजें दस्तावेज में वर्णित के अनुसार काम कर रही थीं।

— जनहितआर

Answer 2

त्वरित और सरल समाधान के लिए प्रयास करें:

1. एक बूलियन मान के लिए अतिरिक्त डेटा सेट करें।

   extraData = {} this.state.refresh

2. जब आप पुन: रेंडर / रिफ्रेश करना चाहते हैं तो बूलियन स्टेट का मान टॉगल करें

   this.setState({ 
       refresh: !this.state.refresh
   })
   

Comments

जब से मैं डेटा प्रोप में डेटा जोड़ रहा हूँ, ठीक वैसा ही मुझे चाहिए। इसके अलावा, यह रिएक्ट-नेटिव टीम द्वारा एक सुपर अजीब कार्यान्वयन है ... यह डेटा पर एक ताज़ा फ़ंक्शन या संपत्ति रखने के लिए अधिक समझ में आता है। आयरलैंड के लिए: this.data.refresh()। इसके बजाय, हम एक बूलियन सेट करते हैं और इसे बदलते हैं। बूलियन मूल्य का कोई मतलब नहीं है, इसलिए इसमें मौजूद बिंदु क्या है? ... (डेटा ताज़ा करने के अलावा कोई अन्य बिंदु नहीं है?)

— युंगगुन

@ HradeshKumar मैं इसे करता हूं लेकिन डेटा के अंदर अंतिम आइटम यह गायब नहीं हो सकता है!

— देवांश

यह आकर्षण की तरह काम करता है, लेकिन मुझे अभी भी पता नहीं है कि this.state.usersमैं काम क्यों नहीं कर रहा था, भले ही मैं कुछ उपयोगकर्ताओं में एक झंडा बदल रहा था।

— shyammakwana.me

Answer 3

ओह, यह आसान है, बस उपयोग करें 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जाएगा , हमारा अपडेट होगा, क्योंकि अपरिवर्तनीय वस्तु पिछले की तुलना में एक अलग होगी।

Comments

मैं अंत में समझ गया extraData! VirtualisedListकोड के लिंक के लिए धन्यवाद !

— तुषार कूल

हैलो, @ सूडोपिज़ मैं अंतिम आइटम को हटाने के बाद फ़्लैटलिस्ट को फिर से प्रस्तुत करना चाहता हूं, इस Q stackoverflow.com/questions/58780167/…

— Oliver D

Answer 4

ठीक है। मुझे पता चला है कि अगर हम चाहते हैं कि फ़्लैटलिस्ट डेटा प्रोप के बाहर डेटा परिवर्तन को जाने, तो हमें इसे एक्स्ट्राडेटा में सेट करने की आवश्यकता है, इसलिए मैं इसे अभी इस तरह करता हूं:

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

देखें: https://facebook.github.io/react-native/docs/flatlist#extradata

Comments

सबसे अच्छा कार्यान्वयन ... मैंने इसे डेटा प्रोप के समान ही सेट करना पसंद किया, इसलिए जब राज्य में कुछ भी बदलता है तो यह ताज़ा नहीं होता है, लेकिन यह अब तक का सबसे आसान कार्यान्वयन है। धन्यवाद!

— रॉबर्ट Kehoe

नमस्कार, @MahdiBashirpour मैं अंतिम आइटम को हटाने के बाद फ़्लैटलिस्ट को फिर से प्रस्तुत करना चाहता हूं, इस Q stackoverflow.com/questions/58780167/…

— Oliver D

Answer 5

यदि आपके पास एक बटन होने वाला है, तो आप डेटा को onPress के अंदर एक setState के साथ अपडेट कर सकते हैं। SetState फिर अपने FlatList को फिर से प्रस्तुत करेगा।

Comments

मेरी touchablehighlight में एक सेटस्टैट है। सेटस्टेट ठीक काम कर रहा है, लेकिन फ्लैटलिस्ट राज्य मूल्य का अद्यतन नहीं दिखा रहा है -> इस .state.value

— shalonteoh

आपके FlastList में मान अपडेट नहीं हो रहे हैं क्योंकि आप डेटा स्रोत को सीधे अपडेट नहीं कर रहे हैं। यह है ।state.data फ्लैट लिस्ट के साथ प्रस्तुत किया गया है, लेकिन ऑनप्रेस में आप केवल इसे अपडेट कर रहे हैं ।state.value

— 17

क्षमा करें मेरी गलती, प्रश्न टाइपो। यह होना चाहिए ।state.data [index]

— .value

Answer 6

बहुत खोज और वास्तविक उत्तर की तलाश के बाद आखिरकार मुझे वह उत्तर मिल गया जो मुझे लगता है कि यह सबसे अच्छा है:

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

मेरी मुख्य समस्या थी (KeyExtractor) मैं इसे इस तरह से उपयोग नहीं कर रहा था। काम नहीं कर रहा: KeyExtractor = {(आइटम) => item.ID} के बाद मैंने इसे बदल दिया यह आकर्षण की तरह काम करता है मुझे आशा है कि यह किसी की मदद करता है।

Comments

आप this.state.refreshingऔर समारोह के मूल्य डाल सकते हैं handleRefresh?

— DevAS

Answer 7

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>
    );
  }

Answer 8

यहाँ पिछले उत्तरों पर एक विस्तार। सुनिश्चित करने के लिए दो भाग, सुनिश्चित करें कि आप अतिरिक्तता में जोड़ते हैं और यह कि आपका keyExtractor अद्वितीय है। यदि आपका keyExtractor निरंतर है तो एक रेंडरर को ट्रिगर नहीं किया जाएगा।

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

Answer 9

मैंने 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,
}]

Answer 10

मेरे लिए, ट्रिक अतिरिक्त था और आइटम घटक में एक और बार नीचे ड्रिलिंग

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 });
    }
  }
}

Answer 11

ऐसे वैरिएबल लगाएं जो आपके इंटरेक्शन से बदल जाएंगे extraData

आप रचनात्मक हो सकते हैं।

उदाहरण के लिए यदि आप उन पर चेकबॉक्स के साथ एक बदलती सूची के साथ काम कर रहे हैं।

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

Answer 12

अगर हम चाहते हैं कि फ़्लैटलिस्ट को प्रोप और स्टेट दोनों के डेटा में बदलाव का पता चले, तो हम प्रो और स्टेट दोनों को संदर्भित करते हुए ऑब्जेक्ट का निर्माण कर सकते हैं और फ़्लैटलिस्ट को रिफ्रेश कर सकते हैं।

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

डॉक्स: https://facebook.github.io/react-native/docs/flatlist#extradata

Answer 13

प्रतिक्रिया-मूल-फ़्लैटलिस्ट में, वे एक संपत्ति हैं जिसे एक्सट्राडाटा कहा जाता है। अपने फ़्लैटलिस्ट में नीचे की पंक्ति जोड़ें।

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

Answer 14

इस उदाहरण में, फिर से रेंडर करने के लिए, बस चर को बदलें machine

const [selected, setSelected] = useState(machine)

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

Answer 15

महज प्रयोग करें:

onRefresh={true}

अपने flatListघटक के अंदर ।

Comments

यह एक त्रुटि पैदा करता है, यू की जरूरत है तो refreshingप्रोप का उपयोग करने के लिए

— महमूफ़र

Answer 16

फ्लैटलिस्ट का एक्स्ट्राडेटा मेरे लिए काम नहीं कर रहा था और मैं Redux से एक प्रोप का उपयोग करने के लिए हुआ। यह 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 का उपयोग करें getDerivedStateFromProps