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

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

출처

2017-04-13 shalonteoh

(https://facebook.github.io/react-native/docs :

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

유일한 것은 염두에 두어야 할 필요는 section는 DIFF 구조를 가지고있다 /flatlist.html) say "이것은 'PureComponent'입니다. 즉, props가 얕게 같으면 다시 렌더링하지 않습니다 .' renderItem' 함수가 의존하는 모든 것이'= =='업데이트를하지 않으면 변경시 UI가 업데이트되지 않을 수 있습니다. 여기에는'data' prop 및 부모 구성 요소 상태가 포함됩니다. " 이 조언을 따르고 있습니까? –

'extraData'와'shouldItemUpdate'로 무엇을 시도했는지에 상관없이 목록을 다시 렌더링 할 수 없습니다. 내가 끝낸 것은 국가를 지우고, 렌더링을 기다렸다가 상태를 업데이트하는 것이 었습니다. 'this.setState ({data : null},() => {this.setState ({data : actualData})}); ' –

FlatList 구성 요소에 extraData 속성을 사용하십시오. 문서 상태로

"FlatList에 extraData = {this.state}를 전달하여 우리는 state.selected 변경이 소품을 설정하지 않고, FlatList는 모르겠다 때 확인 FlatList 자체가 다시 렌더링 할 PureComponent이기 때문에 아이템을 다시 렌더링해야하고, prop 비교에서는 변경 사항이 표시되지 않습니다. "

출처

2017-06-16 23:21:06 ED209

redux를 사용하고 있는데,이 경우'data = {this.props.searchBookResults}'와 'extraData = {this.state}'도 아니고 'extraData = {this.props}'이 (가) 나를 위해 일하고있다. 그리고'data = {this.props.searchBookResults}'도 작동하지 않습니다. 무엇을해야합니까? – Sujit

나는 redux도 사용하고 있습니다. 작동하지 않았습니다. –

@EdwinVargas 어떤 해결책을 찾았습니까? 내가 할 수 없었다 – Sujit

당신이 버튼을하려는 경우, 당신은 onPress에 내부 setState를 사용하여 데이터를 업데이트 할 수있는 텍스트 값을 업데이트하는 것입니다. SetState가 FlatList를 다시 렌더링합니다.

출처

2017-04-13 17:30:57 WilliamC

내 touchablehighlight에 setState가 있습니다. setState는 정상적으로 작동하지만 flatlist가 상태 값의 업데이트를 표시하지 않습니다. -> this.state.value – shalonteoh

데이터 소스를 직접 업데이트하지 않으므로 FlastList의 값이 업데이트되지 않습니다. 이쪽.데이터는 FlatList로 렌더링되는 데이터이지만 onPress에서는 this.state.value 만 업데이트합니다. – WilliamC

죄송합니다. 내 실수입니다. 오타가 있습니다. this.state.data [index] .value가되어야합니다. – shalonteoh

오 즉, 단지 extraData

당신은 단지 일반 onComponentWillReceiveProps 방법을 통해 wether that object has changed 확인 추가 데이터가 뒤에서 작동하는 방식이 FlatList 또는 VirtualisedList입니다 참조 쉽게 사용할 수 있습니다.

여러분이해야 할 일은 extraData으로 변경되는 것을 제공해야합니다. 내가하는 모든 일이 내가보고 싶은대로 포함하는 나는지도 (불변 객체)를 통과하다 내가 immutable.js을 사용하고

는 여기에 내가하는 일입니다. this.props.foo 또는 this.props.bar 변화가 우리의 CustomComponentRow 업데이트됩니다 그런 식으로

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

, 불변의 객체가 이전과는 다른 하나가 될 것입니다 때문입니다.

출처

2017-09-01 17:57:25 SudoPlz

FlatList을 SectionList으로 바꿨으며 상태가 변경 될 때마다 업데이트됩니다. [FlatList에 대한 문서]

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

출처

2018-03-02 14:36:45 Jamland

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

답변

관련 문제