จะ re-render flatlist ได้อย่างไร?

Question 1

ซึ่งแตกต่างจาก ListView ที่เราสามารถอัปเดต this.state.datasource มีวิธีการหรือตัวอย่างในการอัปเดต FlatList หรือ re-render หรือไม่?

เป้าหมายของฉันคืออัปเดตค่าข้อความเมื่อผู้ใช้กดปุ่ม ...

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คุณสมบัติบนคอมโพเนนต์ FlatList ของคุณ

ตามเอกสารระบุ:

เมื่อส่งextraData={this.state}ถึงFlatListเราต้องแน่ใจว่าFlatListจะแสดงผลอีกครั้งเมื่อมีstate.selectedการเปลี่ยนแปลง หากไม่มีการตั้งค่าเสานี้FlatListจะไม่ทราบว่าจำเป็นต้องแสดงรายการใด ๆ อีกครั้งเนื่องจากเป็น a PureComponentและการเปรียบเทียบเสาจะไม่แสดงการเปลี่ยนแปลงใด ๆ

Question 3

สำหรับวิธีแก้ปัญหาที่ง่ายและรวดเร็วลอง:

ตั้งค่าข้อมูลเพิ่มเติมเป็นค่าบูลีน

extraData = {this.state.refresh}
สลับค่าของสถานะบูลีนเมื่อคุณต้องการ re-render / refresh list
```
this.setState({ 
    refresh: !this.state.refresh
})
```

Question 4

ง่ายมากแค่ใช้ extraData

คุณเห็นวิธีการทำงานของข้อมูลเพิ่มเติมเบื้องหลังคือFlatListหรือVirtualisedListเพียงแค่ตรวจสอบว่าวัตถุมีการเปลี่ยนแปลงผ่านทางปกติonComponentWillReceivePropsวิธีการ

ดังนั้นสิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่าคุณได้ให้สิ่งที่เปลี่ยนแปลงไปในไฟล์extraData.

นี่คือสิ่งที่ฉันทำ:

ฉันใช้js ที่ไม่เปลี่ยนรูปดังนั้นสิ่งที่ฉันทำคือส่งแผนที่ (วัตถุที่ไม่เปลี่ยนรูป) ที่มีสิ่งที่ฉันต้องการดู

<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

ตกลงฉันเพิ่งค้นพบว่าถ้าเราต้องการให้ FlatList ทราบการเปลี่ยนแปลงข้อมูลภายนอก data prop เราต้องตั้งค่าเป็น extraData ดังนั้นฉันจึงทำเช่นนี้ทันที:

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

อ้างถึง: https://facebook.github.io/react-native/docs/flatlist#extradata

Question 6

หากคุณกำลังจะมีปุ่มคุณสามารถอัปเดตข้อมูลด้วย setState ภายใน onPress จากนั้น SetState จะแสดง FlatList ของคุณอีกครั้ง

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

ปัญหาหลักของฉันคือ (KeyExtractor) ฉันไม่ได้ใช้มันแบบนี้ ไม่ทำงาน: keyExtractor = {(item) => item.ID} หลังจากที่ฉันเปลี่ยนเป็นสิ่งนี้มันใช้งานได้ดีฉันหวังว่านี่จะช่วยใครบางคนได้

Question 8

เพียงส่วนขยายของคำตอบก่อนหน้านี้ที่นี่ สองส่วนเพื่อให้แน่ใจว่าคุณได้เพิ่ม extraData และ keyExtractor ของคุณไม่ซ้ำกัน หาก keyExtractor ของคุณคงที่การแสดงผลจะไม่ถูกทริกเกอร์

<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}Please check code ด้านล่างเพื่อดูรายละเอียดเพิ่มเติม

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

สำหรับฉันเคล็ดลับคือ extraData และเจาะลึกลงไปในส่วนประกอบของรายการอีกครั้ง

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

หากเราต้องการให้ FlatList ทราบว่าข้อมูลเปลี่ยนแปลงทั้ง prop และ stateเราสามารถสร้าง object ที่อ้างอิงทั้ง prop และ state และรีเฟรช flatlist

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

เอกสาร: https://facebook.github.io/react-native/docs/flatlist#extradata

Question 14

ใน react-native-flatlist เป็นคุณสมบัติที่เรียกว่า extraData เพิ่มบรรทัดด้านล่างในแฟลตลิสต์ของคุณ

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

Question 15

ในตัวอย่างนี้หากต้องการบังคับให้ re-render เพียงแค่เปลี่ยนตัวแปร machine

const [selected, setSelected] = useState(machine)

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

Question 16

เพียงใช้:

onRefresh={true}

ภายในflatListส่วนประกอบของคุณ

Question 17

extraData ของ Flatlist ไม่ได้ผลสำหรับฉันและฉันบังเอิญใช้ prop จาก redux สิ่งนี้ฟังดูเหมือนกับปัญหาจากความคิดเห็นในคำตอบของ ED209 ฉันลงเอยด้วยการโทรหา setState ด้วยตนเองเมื่อฉันได้รับ prop

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

สำหรับผู้ที่ใช้> React 17 ให้ใช้getDerivedStateFromProps