플랫리스트를 다시 렌더링하는 방법은 무엇입니까?

플랫리스트를 다시 렌더링하는 방법은 무엇입니까?

---

ListView와 달리 this.state.datasource를 업데이트 할 수 있습니다. FlatList를 업데이트하거나 다시 렌더링하는 방법이나 예제가 있습니까?

내 목표는 사용자가 버튼을 누를 때 텍스트 값을 업데이트하는 것입니다.

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

---

extraDataFlatList 구성 요소 에서 속성을 사용합니다 .

문서에 다음과 같이 설명되어 있습니다.

전달하여 extraData={this.state}에 FlatList우리 있는지 확인 FlatList자체가 때 다시 렌더링 state.selected변경. 이 소품을 설정하지 않으면 FlatList는 항목을 다시 렌더링해야한다는 것을 알지 못합니다. 이는 또한 a PureComponent이고 소품 비교에 변경 사항이 표시되지 않기 때문입니다 .

---

빠르고 간단한 해결 방법 :

1. 추가 데이터를 부울 값으로 설정합니다.

   extraData = {this.state.refresh}

2. 목록을 다시 렌더링 / 새로 고침하려는 경우 부울 상태 값을 전환합니다.

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

---

오 쉽 네요, 그냥 사용하세요 extraData

장면 뒤에서 추가 데이터가 작동하는 방식이 FlatList 이거나 VirtualisedList 가 일반 메서드 를 통해 개체가 변경되었는지 여부를 확인합니다 onComponentWillReceiveProps.

따라서해야 할 일은 extraData.

내가하는 일은 다음과 같습니다.

immutable.js를 사용 하고 있으므로보고 싶은 내용이 포함 된 Map (불변 객체)을 전달하기 만하면됩니다.

<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하면 업데이트됩니다.

---

OK. FlatList가 데이터 소품 외부의 데이터 변경을 알도록하려면 extraData로 설정해야하므로 지금 다음과 같이 설정해야합니다.

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

참조 : https://facebook.github.io/react-native/docs/flatlist#extradata

---

Button이 있으면 onPress 내에서 setState로 데이터를 업데이트 할 수 있습니다. 그러면 SetState가 FlatList를 다시 렌더링합니다.

---

나는 추가하여이 문제를 해결 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>
    );
  }

---

많은 검색과 실제 대답을 찾은 후에 마침내 나는 그것이 최고라고 생각하는 대답을 얻었습니다.

       <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} 내가 이것을 변경 한 후 매력처럼 작동했습니다. 누군가에게 도움이되기를 바랍니다.

---

나는 대체했다 FlatList로 SectionList하며 상태 변화에 제대로 업데이트입니다.

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

명심해야 할 유일한 것은 sectiondiff 구조 가 있다는 것입니다.

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

---

저에게 트릭은 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 });
    }
  }
}

---

상호 작용에 의해 변경 될 변수를 extraData

당신은 창의적 일 수 있습니다.

예를 들어 체크 박스가있는 변경 목록을 처리하는 경우입니다.

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

---

If we want the FlatList to know the data change both prop and state,we can construct an object referencing both prop and state and refresh the flatlist.

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

Docs: https://facebook.github.io/react-native/docs/flatlist#extradata

---

Just use:

onRefresh={true}

inside your flatList component.

---

In react-native-flatlist, they are a property called as extraData. add the below line to your flatlist.

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

---

In this example, to force a re-render, just change the variable machine

const [selected, setSelected] = useState(machine)

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

참고URL : https://stackoverflow.com/questions/43397803/how-to-re-render-flatlist