在useEffect挂钩中设置状态和AsyncStorage会导致无限循环吗

Question

我是hooks的新手，最近开始在我的React Native项目中使用钩子。

我正在使用AsyncStorage构建一个简单的todo应用程序。首先，我使用useState挂钩：初始化初始data和setData状态

const [data, setData] = useState([]);

有两个textInput和提交按钮，我用来将数据保存到AsyncStorage。这里是saveData函数：

const saveData = async () => {
const arrData = [{ name: 'vikrant', phone: 123456 }]; // [{ name, phone}] from the textInput
const storedData = await AsyncStorage.getItem('user');
const storedDataParsed = JSON.parse(storedData);
let newData = [];
if (storedData === null) {
// save
await AsyncStorage.setItem('user', JSON.stringify(arrData));
} else {
newData = [...storedDataParsed, user];
await AsyncStorage.setItem('user', JSON.stringify(newData));
}
setName('');
setPhone('');
Keyboard.dismiss();
};

现在，我使用useEffect从AsyncStorage获取数据，并将其设置为data状态。我正在使用数据在屏幕上呈现文本。

useEffect(() => {
retrieveData();
}, [data]);
const retrieveData = async () => {
try {
const valueString = await AsyncStorage.getItem('user');
const value = JSON.parse(valueString);
setData(value);
} catch (error) {
console.log(error);
}
};

我在useEffect中使用[data]，因为我想在每次数据更改时(即每次在AsyncStorage中保存数据时(重新渲染我的组件。但这会导致无限循环，因为setData会导致useEffect无限运行。

如果我从[]中删除data，它不会循环，但我在渲染中的数据落后了一步。因此，每当我保存数据时，它不会显示当前数据，而是显示前一个数据。

有什么关于我在这里做错了什么的解释吗？我该如何解决这个问题？

谢谢。

Answer 1

正如您已经提到的，无限循环是由于您将data作为依赖项传递给useEffect，并在useEffect中调用的函数内部设置。

这里的解决方案是，无论何时在AsyncStorage 中设置值，都不要使用useEffect，而是使用setData

const saveData = async () => {
const arrData = [{ name: 'vikrant', phone: 123456 }]; // [{ name, phone}] from the textInput
const storedData = await AsyncStorage.getItem('user');
const storedDataParsed = JSON.parse(storedData);
let newData = [];
if (storedData === null) {
// save
await AsyncStorage.setItem('user', JSON.stringify(arrData));
} else {
newData = [...storedDataParsed, user];
await AsyncStorage.setItem('user', JSON.stringify(newData));
}
setName('');
setPhone('');
setData(newData);
Keyboard.dismiss();
};

Answer 2

只需添加一个条件标志retrieve来包装异步存储retrieveData()调用。

同样在"保存数据"的上下文中，我可能只是将异步存储逻辑与状态逻辑分开。当前saveData被状态和异步存储逻辑污染。

类似于：

const [retrieve, setRetrieve] = useState(false);
// Pure AsyncStorage context
const saveData = async () => {
...
if (storedData === null) {
await AsyncStorage.setItem('user', JSON.stringify(arrData));
} else {
newData = [...storedDataParsed, user];
await AsyncStorage.setItem('user', JSON.stringify(newData));
}
// XXX: Removed state logic, call it somewhere else.
};
const someHandler = async () => {
await saveData();
setRetrieve(true); // to signal effect to call retrieveData()
}

那么效果的目标只是在保存完成后运行retrieveData()。

const [data, setData] = useState([]);
useEffect(() => {
const retrieveData = async () => {
try {
const valueString = await AsyncStorage.getItem('user');
const value = JSON.parse(valueString);
// Other set states
setData(value);
} catch (error) {
console.log(error);
}
};
// Retrieve if has new data
if (retrieve)
retrieveData();
setRetrieve(false);
}
}, [retrieve]);