react-native - React Native Flatlist 删除项目 删除最后一个项目
问题描述
我正在使用“react-native-swipe-list-view”来尝试删除一个项目。出于某种原因,当我尝试删除一个项目时,它正在从平面列表中删除最后一个项目,即使该项目仍显示在数组中并且正确的项目已被删除。
当我删除一个项目时,基本上总是从平面列表中删除最后一个项目,即使该项目仍然存在于数据数组中。很奇怪的活动。当我离开并返回页面时,显示正确的数据。
CoinList.js
import React, { Component } from "react";
import { FlatList, StyleSheet, Text, View , AsyncStorage } from "react-native";
import CoinListRow from './CoinListRow';
class CoinList extends Component {
constructor(props) {
super(props);
this.state = {
coinList: null
};
}
updateCoinList = (updatedCoins) => {
this.setState(
{coinList: updatedCoins}
)
}
componentDidMount() {
AsyncStorage.getItem("coins").then(value => {
// need to convert returned object into an array
this.setState({coinList: Object.values(JSON.parse(value))})
});
}
render() {
return (
<View style={styles.container}>
{this.state.coinList !== null ? <FlatList
data={this.state.coinList}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
renderItem={({item}) => <CoinListRow style={styles.item} item={item} updateCoinList={this.updateCoinList}/>}
/> : null}
</View>
);
}
}
export default CoinList;
硬币列表行:
import React, { Component } from "react";
import { withNavigation } from "react-navigation";
import { AsyncStorage } from "react-native";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
import { ListItem } from "react-native-elements";
import { SwipeRow } from "react-native-swipe-list-view";
import images from "../../assets/logos/coinLogos";
class CoinListRow extends Component {
constructor() {
super();
this.state = {
coinInfo: null,
disableInterstitialBtn: false
};
}
componentDidMount() {
const { item } = this.props;
return fetch(`https://api.coincap.io/v2/assets/${item.card.slug}`)
.then(response => response.json())
.then(responseJson => {
console.log(responseJson);
this.setState({
isLoading: false,
coinInfo: responseJson.data
});
})
.catch(error => {
console.error(error);
});
}
removeCoin = () => {
AsyncStorage.getItem('coins')
.then((coins) => {
AsyncStorage.removeItem('coins');
let c = coins ? JSON.parse(coins) : {};
delete c[this.props.item.card.slug]
AsyncStorage.setItem('coins', JSON.stringify(c));
this.props.updateCoinList(Object.values(c));
})
.catch((error)=> {
console.log(error);
alert(error);
}
)
}
render() {
const { coinInfo } = this.state;
const { item } = this.props;
console.log(this.state.coinInfo);
return (
<View>
{this.state.coinInfo ? (
<SwipeRow disableRightSwipe={true} rightOpenValue={-120}>
<View style={styles.standaloneRowBack}>
<Text style={styles.backTextWhite}></Text>
<TouchableOpacity onPress={this.removeCoin}><Text style={styles.backTextWhite}>Remove Item</Text></TouchableOpacity>
</View>
<View>
<ListItem
key={item.card.slug}
leftAvatar={{ source: images[item.card.slug] }}
title={coinInfo.name}
titleStyle={{ fontWeight: "bold" }}
subtitle={coinInfo.symbol}
onPress={this._openInterstitial}
chevron
bottomDivider={true}
/>
</View>
</SwipeRow>
) : null}
</View>
);
}
}
export default withNavigation(CoinListRow);
解决方案
我认为它可能来自这个:
removeCoin = () => {
AsyncStorage.getItem('coins')
.then((coins) => {
AsyncStorage.removeItem('coins');
let c = coins ? JSON.parse(coins) : {};
delete c[this.props.item.card.slug]
AsyncStorage.setItem('coins', JSON.stringify(c));
this.props.updateCoinList(Object.values(c));
})
.catch((error)=> {
console.log(error);
alert(error);
}
)
}
你使用了一个异步函数,但在更新你的硬币之前你并没有真正等待它完成。不太确定,但您可以通过这种方式尝试(也许您需要对其进行编辑):
removeCoin = () => {
AsyncStorage.getItem('coins')
.then((coins) => {
AsyncStorage.removeItem('coins');
let c = coins ? JSON.parse(coins) : {};
delete c[this.props.item.card.slug]
this.setState({coinItem: c});
}).then(async() => {
await AsyncStorage.setItem('coins', JSON.stringify(this.state.coinItem));
}).then(() => {
this.props.updateCoinList(Object.values(this.state.coinItem));
})
.catch((error)=> {
console.log(error);
alert(error);
}
)
}
推荐阅读
- python - How do I implement base power in a Python Pokemon game?
- python - Adding Alpha Channel to Volume in VTK
- c# - 在实现上实现接口的“内部集”属性
- c++ - 为什么使用虚函数时类类型会发生变化?
- apache-spark - 如何使用 where 子句从一个 pyspark 数据帧中获取值
- python - 将大型 Html 文件转换为 PDF
- python - 如何修复我的 Caesar Cipher 函数以及 % 如何在长度内循环?
- javascript - toDate 不是使用 Firebase 的 React 中的函数错误
- swift - 无法在 Swift 中修改 switch case 中的变量
- bash - 如何让 `~/.bash_profile 的一部分仅在 shell 打开时执行?