AsyncStorage 如何与 React Navigation 配合使用?

Question

我试图在我的反应本机应用程序中从 AsyncStorage 获取一个值，但它首先显示为空字符串。

假设我有 2 个组件，主页和关于。

"关于"屏幕是我获取 AsyncStorage 值的位置。

我能够使用createBottomTabNavigator在屏幕底部创建导航选项卡，以便我可以在"主页"和"关于"之间切换。

当我按下"关于"屏幕时，我试图控制台记录该值，但它只是一个空数组。如果我像这样使用钩子(或使用效果(：

const [data, setData] = useState([])
const asyncFunctionData = async () => {
try {
const storageData = await AsyncStorage.getItem('key_data');
setData(JSON.parse(storageData));
console.log(data);
} catch (e) {}
}
useEffect(() => {
asyncFunctionData();
}, [data]);

由于某种原因，该组件将持续执行，但是经过几次执行，我终于可以得到AsyncStorage的值。但问题是为什么它会多次执行，为什么我一开始会得到一个空数组？我以为拥有[]只会执行一次或更新时执行 useEffect。

异步存储对连续执行是否有某种影响？另外，异步存储是否在应用程序加载时没有任何价值？

Answer 1

你的钩子不依赖于你从 AsyncStorage 获取值后设置的数据，你也应该在 useEffect 中定义异步函数

const [data, setData] = useState([])
useEffect(() => {
const asyncFunctionData = async () => {
try {
const storageData = await AsyncStorage.getItem('key_data');
setData(JSON.parse(storageData));
} catch (e) {}
}
asyncFunctionData();
}, [setData]);`