Question

我有一个可显示项目的FlatList

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

displayColor

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

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

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

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}
    />

React Native渲染组件

1 个答案: