react-native - React Native 渲染组件

Question

我有一个呈现项目的 FlatList

<FlatList
        data={this.state.color}
        renderItem={this.displayColor}
        horizontal={true}
        keyExtractor={item => item.color}
    />

显示颜色

displayColor= ({ item }) => {
    let btncolor = 'white'
    if(item.color == this.state.fcolor){
        btncolor = 'red'
    }
    return(
        <Color color={item.color} btncolor ={btncolor} colorChosen ={() =>this.chooseColor(item)}/>
   )         
}

选择颜色

chooseColor(item){
   this.setState({
       fcolor:item.color
   })
  this.displayColor({item}) // NOT WORKING
}

我的任务是用红色在 Color 组件中显示当前选定的 Button，上面的代码正在完成工作，但它需要渲染 func displayColor，因此它将在 chooseColor func setstate fcolor 之后使用 item.color 检查状态，但我无法调用 displayColor 函数在选择颜色函数中刷新，我该怎么做，或者有一种简单的方法来完成任务。谢谢你

标签： react-nativerenderingreact-native-flatlist

Answer 1

您应该将 extraData 道具传递给您的 FlatList

<FlatList
        data={this.state.color}
        renderItem={this.displayColor}
        horizontal={true}
        extraData={this.state.fcolor} //Add this line to your FlatList
        keyExtractor={item => item.color}
    />