React Native AsyncStorage getAllKeys无限循环

Question

This AsyncStorageHooks反应自定义挂钩

import {useState} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
const AsyncStorageHooks = (key, value, mergedValue, keys) => {
const [data, setData] = useState('');
const [error, setError] = useState('');
const storeData = async () => {
try {
if (key && value) {
const jsonValue = JSON.stringify(value);
await AsyncStorage.setItem(key, jsonValue);
setData(jsonValue);
}
} catch (e) {
setError(e);
}
};
const getData = async () => {
try {
if (key) {
const jsonValue = await AsyncStorage.getItem(key);
setData(jsonValue != null ? JSON.parse(jsonValue) : '');
}
} catch (e) {
setError(e);
}
};
const mergeData = async () => {
try {
if (key && value && mergedValue) {
const jsonValue = JSON.stringify(value);
const mergedJsonValue = JSON.stringify(mergedValue);
await AsyncStorage.setItem(key, jsonValue);
await AsyncStorage.mergeItem(key, mergedJsonValue);
}
} catch (e) {
setError(e);
}
};
const removeData = async () => {
try {
if (key) {
await AsyncStorage.removeItem(key);
}
} catch (e) {
setError(e);
}
};
const getAllKeys = async () => {
let allKeys = [];
try {
allKeys = await AsyncStorage.getAllKeys();
setData(allKeys);
} catch (e) {
setError(e);
}
};

return {
data,
storeData,
getData,
removeData,
mergeData,
getAllKeys,
error,
};
};
export default AsyncStorageHooks;

这是我的家庭组件

const {data, error, getData, storeData, getAllKeys} =
useAsyncStorage('@word');
getData(); // this is works and use setData
storeData(); // this is works and use setData
getAllKeys();
console.log(data);

这工作没有任何问题，他们在相同的状态下使用相同的页面。它不会进入无限循环。唯一的getAllKeys不起作用。其他功能工作起来没有任何问题。

另请注意：setData(allKeys(；更改为setData(allKeys+''(；或setData(JSON.stringfy(allKeys((；停止到无限循环为什么

Answer 1

由于getAllKeys()被一次又一次地调用，您将得到一个无限循环。第一次调用它时，会调用这个setData(keys)，它会重新渲染组件，因为存在状态更改。

当组件重新渲染时，会再次调用getAllKeys()，因此会调用setData(keys)，并且它将永远存在。你可能想用useEffect来解决这个问题，比如：

import {Text, View} from 'react-native';
import React, {useState, useEffect} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
const Home = () => {
const [data, setData] = useState([]);
useEffect(()=>{
const getAllKeys = async () => {
let keys = [];
try {
keys = await AsyncStorage.getAllKeys();
setData(keys);
} catch (e) {
// read key error
}
};
getAllKeys();
},[])
console.log(data);
return (
<View>
<Text>hi</Text>
</View>
);
};
export default Home;