Làm thế nào để hiển thị lại danh sách phẳng?

Không giống như ListView, chúng tôi có thể cập nhật this.state.datasource. Có phương pháp hoặc ví dụ nào để cập nhật FlatList hoặc kết xuất lại nó không?

Mục tiêu của tôi là cập nhật giá trị văn bản khi người dùng nhấn nút ...

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

Sử dụng thuộc extraDatatính trên thành phần FlatList của bạn.

Như tài liệu nói:

Bằng cách chuyển extraData={this.state}cho FlatListchúng tôi đảm bảo FlatListsẽ tự hiển thị lại khi các state.selectedthay đổi. Nếu không đặt chỗ dựa này, FlatListsẽ không biết nó cần kết xuất lại bất kỳ mục nào vì nó cũng là một PureComponentvà so sánh chống đỡ sẽ không hiển thị bất kỳ thay đổi nào.

Để có giải pháp nhanh chóng và đơn giản Hãy thử:

1. đặt dữ liệu bổ sung thành giá trị boolean.

   extraData = {this.state.refresh}

2. Chuyển đổi giá trị của trạng thái boolean khi bạn muốn hiển thị lại / làm mới danh sách

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

Ồ, thật dễ dàng, chỉ cần sử dụng extraData

Bạn thấy cách dữ liệu bổ sung hoạt động đằng sau hậu trường là FlatList hoặc VirtualisedList chỉ kiểm tra ướt đối tượng đó đã thay đổi thông qua một onComponentWillReceivePropsphương thức bình thường .

Vì vậy, tất cả những gì bạn phải làm là đảm bảo rằng bạn cung cấp một cái gì đó thay đổi cho extraData.

Đây là những gì tôi làm:

Tôi đang sử dụng immutable.js nên tất cả những gì tôi làm là chuyển một Bản đồ (đối tượng không thể thay đổi) chứa bất cứ thứ gì tôi muốn xem.

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

Theo cách đó, khi nào this.props.foohoặc this.props.barthay đổi, chúng ta CustomComponentRowsẽ cập nhật, bởi vì đối tượng không thay đổi sẽ khác với đối tượng trước đó.

OK, tôi vừa phát hiện ra rằng nếu chúng ta muốn FlatList biết sự thay đổi dữ liệu bên ngoài data prop, chúng ta cần đặt nó thành extraData, vì vậy tôi làm như sau:

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

tham khảo: https://facebook.github.io/react-native/docs/flatlist#extradata

Nếu bạn sắp có Nút, bạn có thể cập nhật dữ liệu bằng setState bên trong onPress. SetState sau đó sẽ hiển thị lại FlatList của bạn.

sau rất nhiều tìm kiếm và tìm kiếm câu trả lời thực sự cuối cùng tôi đã có câu trả lời mà tôi nghĩ nó là tốt nhất:

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

vấn đề chính của tôi là (KeyExtractor) tôi đã không sử dụng nó như thế này. không hoạt động: keyExtractor = {(item) => item.ID} sau khi tôi thay đổi thành này, nó hoạt động như một sự quyến rũ, tôi hy vọng điều này sẽ giúp ai đó.

Tôi đã giải quyết vấn đề này bằng cách thêm extraData={this.state}Vui lòng kiểm tra mã bên dưới để biết thêm chi tiết

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

Chỉ là một phần mở rộng về các câu trả lời trước đây ở đây. Hai phần cần đảm bảo, Đảm bảo rằng bạn thêm extraData và keyExtractor của bạn là duy nhất. Nếu keyExtractor của bạn không đổi, kết xuất sẽ không được kích hoạt.

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

Tôi đã thay thế FlatListbằng SectionListvà nó là các bản cập nhật đúng về sự thay đổi trạng thái.

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

Điều duy nhất cần ghi nhớ là sectioncó cấu trúc khác nhau:

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

Đối với tôi, mẹo là thêm Dữ liệu và đi sâu vào thành phần vật phẩm một lần nữa

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

Đặt các biến sẽ được thay đổi bởi sự tương tác của bạn tại extraData

Bạn có thể sáng tạo.

Ví dụ: nếu bạn đang xử lý một danh sách thay đổi với các hộp kiểm trên chúng.

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

Nếu chúng ta muốn FlatList biết dữ liệu thay đổi cả prop và state , chúng ta có thể xây dựng một đối tượng tham chiếu đến cả prop và state và làm mới danh sách phẳng.

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

Tài liệu: https://facebook.github.io/react-native/docs/flatlist#extradata

Trong danh sách phản ứng-native-phẳng, chúng là một thuộc tính được gọi là extraData. thêm dòng dưới đây vào danh sách phẳng của bạn.

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

Trong ví dụ này, để buộc hiển thị lại, chỉ cần thay đổi biến machine

const [selected, setSelected] = useState(machine)

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

Chỉ dùng:

onRefresh={true}

bên trong flatListthành phần của bạn .

ExtraData của Flatlist không hoạt động với tôi và tôi tình cờ sử dụng một phần mềm hỗ trợ từ redux. Điều này có vẻ tương tự với các vấn đề từ các nhận xét trong câu trả lời của ED209. Tôi đã kết thúc việc gọi setState theo cách thủ công khi tôi nhận được phần mềm hỗ trợ.

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

Đối với những người bạn sử dụng> React 17, hãy sử dụng getDerivedStateFromProps