使用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。
Modal关闭按钮获取this.state.acceptOffer,如果为true,则将this.state.acceptButtonGray设置为true,如果此逻辑位于其他位置?
是否有其他方法可以打开模态并更改按钮颜色而不使用组件状态?是否想要在TouchableOpacity中使用这些按钮?
我非常感谢给予的任何帮助。
答案 0 :(得分:5)
你应该像这样编写一个renderItem函数
renderItem = ({item, index}) => {
// return here
}
答案 1 :(得分:3)
有人猜测,您是否尝试更改为renderItem={this.renderItem.bind(this)}
?
答案 2 :(得分:1)
根据我的知识项目和索引,作为对象传递到平面列表的renderItem中
所以我们可以通过两种方式
1种方式
平面列表组件
<FlatList
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => this._renderItem(item, index)} //Passing as object from here.
/>
渲染项目
_renderItem = (item, index) => {
console.log(item)
console.log(index)
}
2种方式
平面列表组件
<FlatList
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={( item, index ) => this._renderItem(item, index)}
/>
渲染项目
_renderItem = ({item, index}) => { // Passing as object from here
console.log(item)
console.log(index)
}
答案 3 :(得分:0)
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}
/>
}
/>
答案 4 :(得分:0)
您必须使用bind(this,item)
或更改(item)=>
之类的功能。
答案 5 :(得分:0)
我遇到了同样的问题,浪费了很多时间弄清楚为什么不重新渲染:
如果状态发生任何变化,我们需要设置extraData
的{{1}}属性:
FlatList
请在此处查看官方文档: