React Native SetState()不按预期重新呈现



我制作了带有反应的snap-carousel及以下的旋转木马是旋转木马的代码。在旋转木马中,有选择器和文本输入等。用于渲染功能:

<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中选择任何项目后,状态确实会更新,但在接口上不是。一旦我触发了OnChangeText事件,将调用选择器的渲染函数。当时,选择器中的显示也将进行更新。但是,根据生命周期,当我设置时,旋转木马(包括其细胞)是否应该更新/重新渲染?

旋转木马中的秒表(来自React-native-native-stopwatch-Timer)将有相同的问题。

我不知道这个软件包,但是轮播组件似乎从flatlist组件继承。

文档说:

通过将feltradata = {this.state}传递给flatlist,我们确保flatlist本身将在状态更改时重新渲染。如果不设置此支架,flatlist就不会知道它需要重新渲染任何项目,因为它也是属质组件,并且道具比较不会显示任何更改。

因此,尝试将extraData={this.state}添加到旋转木马组件中。

相关内容

  • 没有找到相关文章

最新更新