如何在函数内部 React Native 中刷新屏幕?
How to refresh a screen in react native inside a function?
我希望能够从我的 FlatList 中删除元素。我无法使用 ItemView 中 TouchableOpacity 的 onPress 来做到这一点,所以我决定创建一个带有 onPress={botClick} 的按钮,所以当我在该按钮上方填充 TextInput 时,它会从 AsyncStorage 中删除该元素,然后该元素也是从产品数据中删除。我的问题是,要从 FlatList 中删除该元素,我必须将导航屏幕更改为另一个屏幕,然后 return 才能看到反映的更改。我能否在 botClick() 中放置一些东西,以便在调用该函数时自动查看更改而不更改屏幕来刷新或充电屏幕?
export default function TestScreen () {
const [proddata, setProddata] = useState([]);
const [deletepar, setDeletepar] = useState('');
const whenClick = () => {
console.log("hello");
}
async function botClick(){
try {
await AsyncStorage.removeItem(deletepar);
console.log("Removed");
//Add something here that refreshes or recharges the screen
}
catch(exception) {
}
};
const ItemView = ({item}) => {
return (
<TouchableOpacity onPress={whenClick}>
<View>
<Text>
{item[0]+ ' ' + item[1]}
</Text>
</View>
</TouchableOpacity>
);
};
async function carInState() {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
setProddata([...proddata, ...result]);
}
useFocusEffect(
React.useCallback(() => {
carInState();
}, [])
);
return (
<View>
<View>
<TextInput placeholder="..." onChangeText={(val) => setDeletepar(val)}/>
<View>
<Button title="Delete" onPress={botClick}/>
</View>
</View>
<FlatList
data={proddata}
renderItem={ItemView}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
};
直接操作状态或者重新获取所有数据都不是问题
async function botClick() {
try {
await AsyncStorage.removeItem(deletepar);
// 1) Variant load data again & invoke setProddata
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
setProddata([...result]);
// 2) Or you can remove it from you list
setProddata(prevProddata => prevProddata.filter(value => value.x.x.x !== deletepar))
} catch (exception) {}
}
我希望能够从我的 FlatList 中删除元素。我无法使用 ItemView 中 TouchableOpacity 的 onPress 来做到这一点,所以我决定创建一个带有 onPress={botClick} 的按钮,所以当我在该按钮上方填充 TextInput 时,它会从 AsyncStorage 中删除该元素,然后该元素也是从产品数据中删除。我的问题是,要从 FlatList 中删除该元素,我必须将导航屏幕更改为另一个屏幕,然后 return 才能看到反映的更改。我能否在 botClick() 中放置一些东西,以便在调用该函数时自动查看更改而不更改屏幕来刷新或充电屏幕?
export default function TestScreen () {
const [proddata, setProddata] = useState([]);
const [deletepar, setDeletepar] = useState('');
const whenClick = () => {
console.log("hello");
}
async function botClick(){
try {
await AsyncStorage.removeItem(deletepar);
console.log("Removed");
//Add something here that refreshes or recharges the screen
}
catch(exception) {
}
};
const ItemView = ({item}) => {
return (
<TouchableOpacity onPress={whenClick}>
<View>
<Text>
{item[0]+ ' ' + item[1]}
</Text>
</View>
</TouchableOpacity>
);
};
async function carInState() {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
setProddata([...proddata, ...result]);
}
useFocusEffect(
React.useCallback(() => {
carInState();
}, [])
);
return (
<View>
<View>
<TextInput placeholder="..." onChangeText={(val) => setDeletepar(val)}/>
<View>
<Button title="Delete" onPress={botClick}/>
</View>
</View>
<FlatList
data={proddata}
renderItem={ItemView}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
};
直接操作状态或者重新获取所有数据都不是问题
async function botClick() {
try {
await AsyncStorage.removeItem(deletepar);
// 1) Variant load data again & invoke setProddata
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
setProddata([...result]);
// 2) Or you can remove it from you list
setProddata(prevProddata => prevProddata.filter(value => value.x.x.x !== deletepar))
} catch (exception) {}
}