Реагируйте на собственный набор setState(), чтобы он не отображался повторно, как ожидалось

Question

Я сделал карусель с реактивной карабелью и ниже приведен код для карусели. В карусели есть picker, textInput и т. Д. Для функции рендеринга:

<Carousel
            ref={(c) => { this._carousel = c; }}
            data={this.state.question}
            renderItem={this._renderItem}
            sliderWidth={standard * 1.1}
            itemWidth={standard * 0.9}

            inactiveSlideScale={0.9}
            inactiveSlideOpacity={0.7}

            firstItem={0}

            activeSlideAlignment={'center'}
            containerCustomStyle={styles.slider}
            contentContainerCustomStyle={styles.sliderContentContainer}
              />

Для рендеринга деталей:

_renderItem ({item, index}) {
  var content;
  switch (item.id) {
      case 1:
          content = <View style={styles.carousel_cell}>
                        <Text style={styles.carouselItemTitle}>{item.displayLabel}</Text>
                        <TextInput style={styles.editor} onChangeText={(text) => this.setState({comment: text})} value={this.state.comment} />
                    </View>;
          break;
      case 2:
          content = <View style={styles.carousel_cell}>
                        <Text style={styles.carouselItemTitle}>{item.displayLabel}</Text>
                        <Picker mode="dropdown"
                        style={styles.picker}
                        selectedValue={this.state.priority}
                        onValueChange={(itemValue) => this.onPriorityChange(itemValue)}>

                          {this.state.list}
                        </Picker>

                    </View>;
          break;
      default:
          content = <View style={styles.carousel_cell}>
                        <Text style={styles.carouselItemTitle}>{item.displayLabel}</Text>
                        <Text>Unknown</Text>
                    </View>;
          break;

  }

  return content;

}

Для запуска события:

onPriorityChange(value) {
    this.setState({priority: value});
}

Проблема здесь в том, что после того, как я выбрал любой элемент в Picker, состояние действительно обновлялось, но на интерфейсе это не так. Функция рендера Picker будет вызвана, как только я вызову событие onChangeText. В это время дисплей в Picker также будет обновлен. Однако, согласно жизненному циклу, разве карусель (включая ее ячейки) не должна обновляться / перерисовываться, когда я устанавливаю состояние?

Секундомер (от реакции-нативного секундомера-таймера) в карусели будет иметь ту же проблему.

Answer 1

Я не знаю этот пакет, но компонент Carousel, кажется, наследуется от компонента FlatList.

В документации сказано:

Передав extraData={this.state} в FlatList, мы гарантируем, что сам FlatList будет повторно визуализироваться при изменении state.selected. Без установки этого реквизита FlatList не знал бы, что ему нужно повторно визуализировать какие-либо элементы, потому что он также является PureComponent, и сравнение реквизитов не покажет никаких изменений.

Итак, попробуйте добавить extraData={this.state} на ваш компонент Карусель.