为什么 React Native 中的 List 部分不是 return 正确的行数据?
Why section List in react native is not return correct row data?
这是我要在部分列表中呈现的数据
this.state = {
data: [
{
title: "Popular Items",
data: [
{
key: 1,
name: "Briyani",
image: "https://bootdey.com/img/Content/avatar/avatar6.png",
uniqueID: 1,
cnt: 0
},
{
key: 2,
name: "Chicken Lollypop",
image: "https://bootdey.com/img/Content/avatar/avatar1.png",
uniqueID: 2,
cnt: 0
},
{
key: 3,
name: "Chicken kabab",
image: "https://bootdey.com/img/Content/avatar/avatar7.png",
uniqueID: 3,
cnt: 0
}]}]};
要显示的分区列表
<SectionList
sections={this.state.data}
renderSectionHeader={({ section }) => {
return (
<View style={styles.titleContainer}>
<Text style={styles.title}>{section.title}</Text>
</View>
);
}}
keyExtractor={item => item.uniqueID.toString()}
extraData={this.state}
renderItem={({ item }) => {
return (
<View style={styles.container}>
{item.cnt === 0 ? (
<Button
title="Add"
onPress={e =>
this.incrementItem(e, item.uniqueID, item.cnt)
}
/>
) : (
<View>
<Button
title="-"
onPress={e =>
this.decrementItem(e, item.uniqueID, item.cnt)
}
/>
<Text>
{item.cnt}
</Text>
<Button
title="+"
onPress={() =>
this.incrementItem(item.uniqueID, item.cnt)
}
/>
</View>
)}
</View>
);
}}
/>
最初 cnt = 0
基于该条件我渲染第一个按钮在我按下后我根据 uniqueID
正确增加计数并重新渲染组件。当我再次按下新渲染的按钮时它 returns 不同 uniqueID
。有什么办法可以解决这个问题。提前致谢。
我想通了,因为我没有在 incrementItem
函数中传递 event
参数 我只传递了 两个参数 但我没有知道为什么即使我们传递两个参数也会调用函数,但函数需要三个参数。
这是我要在部分列表中呈现的数据
this.state = {
data: [
{
title: "Popular Items",
data: [
{
key: 1,
name: "Briyani",
image: "https://bootdey.com/img/Content/avatar/avatar6.png",
uniqueID: 1,
cnt: 0
},
{
key: 2,
name: "Chicken Lollypop",
image: "https://bootdey.com/img/Content/avatar/avatar1.png",
uniqueID: 2,
cnt: 0
},
{
key: 3,
name: "Chicken kabab",
image: "https://bootdey.com/img/Content/avatar/avatar7.png",
uniqueID: 3,
cnt: 0
}]}]};
要显示的分区列表
<SectionList
sections={this.state.data}
renderSectionHeader={({ section }) => {
return (
<View style={styles.titleContainer}>
<Text style={styles.title}>{section.title}</Text>
</View>
);
}}
keyExtractor={item => item.uniqueID.toString()}
extraData={this.state}
renderItem={({ item }) => {
return (
<View style={styles.container}>
{item.cnt === 0 ? (
<Button
title="Add"
onPress={e =>
this.incrementItem(e, item.uniqueID, item.cnt)
}
/>
) : (
<View>
<Button
title="-"
onPress={e =>
this.decrementItem(e, item.uniqueID, item.cnt)
}
/>
<Text>
{item.cnt}
</Text>
<Button
title="+"
onPress={() =>
this.incrementItem(item.uniqueID, item.cnt)
}
/>
</View>
)}
</View>
);
}}
/>
最初 cnt = 0
基于该条件我渲染第一个按钮在我按下后我根据 uniqueID
正确增加计数并重新渲染组件。当我再次按下新渲染的按钮时它 returns 不同 uniqueID
。有什么办法可以解决这个问题。提前致谢。
我想通了,因为我没有在 incrementItem
函数中传递 event
参数 我只传递了 两个参数 但我没有知道为什么即使我们传递两个参数也会调用函数,但函数需要三个参数。