我有一个简单的疑问,我希望有人可以帮助我。我有一个简单的应用程序,它具有一个主屏幕,可在其中加载从SQLite数据库获取的所有数据,但是,当我进入“添加到数据库屏幕”并添加一些数据并记录在数据库中时,我使用了一个函数返回上一个屏幕(props.navigation.goBack()
)。
不幸的是,当我到达屏幕A时,我的钩子没有“刷新”或更新数据库中的数据。有没有办法让它刷新屏幕A来对数据库进行新的调用并用新数据刷新数据?
ps:要调用数据库,我使用今天的日期来获取查询中的数据,因此我的日期不会更新。
这是我的代码:
ScreenA.js
import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
export default function ScreenA() {
const [data, setData] = useState([]);
useEffect(() => {
setData(getDataFromApi())
}, []);
return(
<View>
{ apiResponse() }
<TouchableOpacity onPress={() => { props.navigation.navigate('ScreenB') }}
<Text>Add data</Text>
</TouchableOpacity>
</View>
)
}
这是ScreenB.js
import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
export default function ScreenB() {
function goBackToScreenA() {
addDataToDatabase();
props.navigation.goBack();
}
return(
<View>
<TouchableOpacity onPress={() => { goBackToScreenA() }}>
<Text>Go Back</Text>
</TouchableOpacity>
</View>
);
}
答案 0 :(得分:4)
我通过杀死要转到ScreenB的组件来修复了该错误,我只是使用props.navigation.replace('ScreenB')
来安装navigate
。因此,当我返回到ScreenA时,它将再次加载ScreenA。像第一次一样。在goBack()
中,我也一样,将数据添加到数据库后,用replace('ScreenA')
更改返回。
答案 1 :(得分:2)
如果您正在使用reactnavigation,则可以订阅导航生命周期
React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
// Screen was focused
// Do something
});
return unsubscribe;
}, [navigation]);