reactjs - 在 useEffect Hook 中设置状态以及 AsyncStorage 会导致无限循环？

Question

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

我正在使用 AsyncStorage 构建一个简单的待办事项应用程序。首先，我使用 data 钩子(Hook)初始化初始 setData 和 useState 状态:

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();
};