[英]Deleting specific item from array, not working as intended
有人可以告诉我从数组中删除项目有什么问题吗? 在带有axios.delete方法的deleteSingleItemHandler中,它的工作原理应与它一样,并且在Firebase上会完全删除所选的项目,但是当我想从状态数组中删除该项目时,它将删除一个项目,但不会删除确切选择的项目,例如,我单击了第三个项目,在Firebase上,它删除了第三项,并在设备屏幕上删除了第二项...我在做什么错?
提前致谢! 干杯
class HistoryScreen extends Component {
state = {
orders: []
};
componentDidMount() {
axios
.get(".../orders.json")
.then(response => {
const fetchedOrders = [];
for (let key in response.data) {
fetchedOrders.push({
...response.data[key],
id: key
});
}
this.setState({ orders: fetchedOrders });
});
}
deleteSingleItemHandler = id => {
axios
.delete(`...orders/${id}.json`)
.then(response => {
console.log(response);
});
const newArray = [...this.state.orders];
newArray.splice(id, 1);
this.setState({ orders: newArray });
};
render() {
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.completeOrder}>
{this.state.orders.map(order => {
return (
<TouchableOpacity
key={order.id}
onPress={() => this.deleteSingleItemHandler(order.id)}
>
<View style={styles.singleItem}>
<View style={styles.orderItem}>
<View style={{ flex: 1, marginLeft: 5 }}>
<Text style={{ fontFamily: Fonts.GloriaHallelujah }}>
{order.articleName}
</Text>
</View>
<View
style={{
flex: 1,
justifyContent: "flex-end",
flexDirection: "row",
marginRight: 5
}}
>
<Text>{order.articlePrice}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
})}
</View>
</ScrollView>
</View>
);
}
}
函数Array.prototype.splice
的第一个参数是索引。
newArray.splice(newArray.findIndex(o => o.id === id), 1);
或者,您可以使用Array.prototype.filter
函数过滤该对象
newArray = newArray.filter(o => o.id !== id);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.