Question

我已经用从Google FlatList后端获取的数据填充了firebase。实现是相当标准的，这是一个简化的版本：

export default class Day extends Component {

state = { data : [], today: false }


componentWillMount = async () => {

    const { today } = this.state;
    const { calendarDb } = this.props

    await calendarDb.onNewAgenda({ 
          day : today
        , then: this.parseOnListed 
    })
}

parseOnListed = blob => {

    const { data } = this.state;
    data.push(blob)
    this.setState({ data: data })
}


renderItem = ({ item }) => 
    <Hour data = {item}/>


render = () => 
    <FlatList  
        data         = {this.state.data}
        renderItem   = {this.renderItem}
        keyExtractor = {item => item.ID}
    />

}

问题在于，每次将新的blob推入data时，<Image/>中的<Hour data={item}/>组件都会闪烁。就用户体验而言，这使该列表不可行。是什么赋予了？ <Hour/>也是标准的，或多或少看起来像这样：

const Hour = ({ data }) => 
   <View>
       <Image source={{uri:data.uri}}/>
       <Text> {data.name} </Text>
   </View>

<Text>的内容不会闪烁，只会显示<Image .../>中的图像

Answer 1

检查keyExtractor是否获得唯一ID。平面列表将在状态更新时重新呈现，并再次下载图像。因为，@ Guruparan Giritharan在评论中说的每一行都没有唯一标识。

列表状态更新时，本机平面列表图像会闪烁

1 个答案: