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

Question 1

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

Question 2

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

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

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

Question 3

빠르고 간단한 해결 방법 :

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

extraData = {this.state.refresh}
목록을 다시 렌더링 / 새로 고침 할 때 부울 상태 값을 전환합니다.
```
this.setState({
    refresh: !this.state.refresh
})
```

Question 4

오 쉽 네요, 그냥 사용하세요 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하면 업데이트됩니다.

Question 5

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

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

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

Question 6

Button이 있으면 onPress 내에서 setState로 데이터를 업데이트 할 수 있습니다. 그러면 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가 일정하면 rerender가 트리거되지 않습니다.

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