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

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를 다시 렌더링합니다.

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

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

여기에 이전 답변에 대한 확장입니다. 확인해야 할 두 부분, 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>

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

우리가 할 수있는 FlatList하려면 알고 데이터가 변경 소품과 국가 모두 , 우리는 모두 소품 및 상태를 참조 객체를 구성하고 flatlist를 새로 고칠 수 있습니다.

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

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

react-native-flatlist에서는 extraData라는 속성입니다. 플랫리스트에 아래 줄을 추가하십시오.

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

이 예에서 강제로 다시 렌더링하려면 변수를 변경하면됩니다. machine

const [selected, setSelected] = useState(machine)

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

다음을 사용하십시오.

onRefresh={true}

flatList구성 요소 내부 .

Flatlist의 extraData가 나를 위해 작동하지 않았고 우연히 redux의 소품을 사용하고있었습니다. 이것은 ED209의 답변에 대한 의견의 문제와 유사하게 들렸습니다. 나는 소품을 받으면 수동으로 setState를 호출했습니다.

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를 사용하십시오 .