使用React Native,与FlatList组件有一些问题。这是我的FlatList
<FlatList
data={this.state._data}
renderItem={() => this.renderItem()}
refreshControl={
<RefreshControl
onRefresh={() => this.handleRefresh}
refreshing={this.state.refreshing}
/>
}
/>
这是我的renderItem函数:
renderItem({item, index}) {
return (
<View style={{marginTop: 10, marginHorizontal: 10, paddingLeft:
10}}>
<ListItem
roundAvatar
title={`${item.itemName}`}
subtitle={`${item.amount}`}
avatar={require('../../../images/logo.png')}
/>
<View
style={{
paddingBottom: 10,
paddingTop: 10,
display: 'flex',
flexDirection: "row",
justifyContent: "space-around",
alignContent: "center"
}}
>
<View style={{ flexDirection: "row", alignContent:
"center", width:"45%"}}>
<Button
block
small
// disabled={this.state.acceptButtonGray}
style=
{this.state.acceptButtonGray ? ({
backgroundColor: 'gray',
width: "100%"
}) : ({backgroundColor: "#369ecd",
width: "100%"
})}
onPress={() =>
this.setState({
modalVisible: true,
// acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
acceptOffer: true,
})
}
>
<Text>
Accept
</Text>
</Button>
</View>
</View>
</View>
);
}
按钮中onPress中的this.setState应该使模态可见,并将acceptOffer设置为true。 Modal打开,用户确认他们的报价。打开该模态的商品按钮现在应该是灰色的,甚至更好,禁用。
如上所示传递我的RenderItem函数,我收到了
TypeError: Cannot read property 'item' of undefined.
像这样传递我的RenderItem函数:
renderItem={this.renderItem}
我收到此错误:
_this2.setState is not a function
FlatList组件当然负责我的部分问题,以及我调用this.setState的方式和位置。我的帖子中只显示了一个按钮,但有两个按钮,一个用于接受,一个用于拒绝。有两个模态会改变什么吗?
FlatList轻松显示我的ListItem组件,直到我尝试在View中包含那些ListItems的按钮中调用this.setState。
模态关闭按钮采用this.state.acceptOffer,如果为true,则将this.state.acceptButtonGray设置为true,如果此逻辑在其他地方?
有没有其他方法可以打开模态并更改按钮颜色而不使用组件状态?是否想要在TouchableOpacity中使用这些按钮?
我非常感谢任何帮助。
你应该写一个这样的renderItem函数
renderItem = ({item, index}) => {
// return here
}
有人猜测,你是否尝试过改为renderItem={this.renderItem.bind(this)}
?
1)你可以写函数 -
renderItem = ({item, index}) => {
// return here
}
2)或者如果你想执行你的功能那么 -
<FlatList
data={this.state._data}
renderItem={(item) => this.renderItem.bind(this, item)}
refreshControl={
<RefreshControl
onRefresh={() => this.handleRefresh}
refreshing={this.state.refreshing}
/>
}
/>
您必须使用bind(this,item)
或更改功能,如(item)=>
。
我遇到了同样的问题,浪费了很多时间来弄清楚它为什么不重新渲染:
如果状态发生任何变化,我们需要设置extraData
的FlatList
道具:
<FlatList data={this.state.data} extraData={this.state} .../>
请参阅此处的官方文档: