Блог

Итак, у меня есть плоский список, который получает массив элементов. Когда я прокручиваю вниз, я добавляю больше элементов в конец этого массива и показываю пользователю.

Проблема в том, что каждый отдельный элемент отображается при добавлении в наш массив элементов, а иногда даже отображается дважды.

Код здесь упрощен. /r / reactnative не смог ответить на этот вопрос.

 constructor(props) {
super(props);
this.state = {itemsTest: ['A', 'A', 'A', 'A']}
}

render() {


// Key is fine, since none of my items are changing indexes. I am just adding new items.
return (

<FlatList

keyExtractor={(item,index) => index}

scroll

data={this.state.itemsTest}

renderItem={({item, index}) => <View style={{width: windowWidth}}><Text>{item}</Text></View>

onEndReached={() => this.nextItemsTest()}

onEndReachedThreshold={0.2}

</FlatList>
)
}







nextItemsTest() {

// From suggestions below, just add an element to this array.

console.log('nextItemsTest');

const x = ['A'];

// Have worked with many variations of setting state here. I don't think this is the issue.
this.setState((prevState) => ({itemsTest: [...prevState.itemsTest, ...x],}));}

  

Вот результат. Каждый отдельный элемент повторно отображается (даже дважды) каждый раз, когда устанавливается мое состояние.

Я просто хочу повторно отобразить элементы, которые не изменились. Спасибо.

Вместо использования View непосредственно в вашем рендере flatlist вы можете создать другой компонент, который является чистым компонентом. таким образом, он будет повторно отображаться только при изменении его данных. например, в вашем случае он повторно отображает каждый элемент только один раз.

вот решение

1-й создайте чистый компонент, подобный этому

 class SmartView extends PureComponent {
  render() {
    const {item, index} = this.props;
    return (
      <View style={{height: 300}}>
        {console.log('rendering', index)}
        <Text>{item}</Text>
      </View>
    );
  }
}  

а затем замените View на SmartView в вашем плоском списке следующим образом

  <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={this.state.itemsTest}
        renderItem={({item, index}) => <SmartView item=                                
                                        {item} index={index} />}
        onEndReached={() => this.nextItemsTest()}
        onEndReachedThreshold={0.2}
      />