使用Hooks的Todo应用中useEffect循环触发致应用挂起的问题求助

看起来你遇到了一个典型的React Hooks状态更新与副作用循环的问题，我来帮你梳理清楚原因并给出解决方案：

问题根源分析 #

• 依赖data导致无限循环：当你把data加入useEffect的依赖数组后，每次retrieveData里调用setData(value)会更新data状态，触发useEffect重新执行，再次调用retrieveData，形成无限循环，最终导致应用挂起。
• 移除data依赖后UI不更新：此时useEffect只在组件挂载时执行一次，后续提交新Todo后，虽然数据被存入AsyncStorage，但useEffect不会重新触发去获取最新数据，所以新添加的内容要等下一次提交才会显示。

正确的解决方案 #

核心思路是：初始化时读取一次AsyncStorage数据，提交新Todo时直接更新本地状态并同步到AsyncStorage，不需要依赖useEffect来重复读取。

1. 修改提交逻辑（假设你有提交按钮的处理函数） #

提交时先更新本地状态，再把新数据存入AsyncStorage，这样UI会立即更新：

// 假设你的两个输入框状态是inputValue1和inputValue2
const handleSubmit = async () => {
  // 创建新的Todo项，这里可以根据你的需求组合两个输入框内容
  const newTodo = {
    id: Date.now(), // 用时间戳做唯一ID
    content1: inputValue1,
    content2: inputValue2
  };
  
  // 生成新的data数组并更新状态
  const updatedData = [...data, newTodo];
  setData(updatedData);
  
  // 将新数据存入AsyncStorage
  try {
    await AsyncStorage.setItem("user", JSON.stringify(updatedData));
  } catch (error) {
    console.error("存储数据失败:", error);
  }
  
  // 清空输入框（可选）
  setInputValue1("");
  setInputValue2("");
};

2. 调整useEffect的依赖，只初始化读取数据 #

让useEffect只在组件挂载时执行一次，用于从AsyncStorage加载初始数据：

useEffect(() => {
  // AsyncStorage.clear(); // 调试时可以用，正式环境去掉
  retrieveData();
}, []); // 空依赖数组，仅组件挂载时执行一次

const retrieveData = async () => {
  try {
    const valueString = await AsyncStorage.getItem("user");
    // 处理存储为空的情况，避免JSON.parse报错
    const storedData = valueString ? JSON.parse(valueString) : [];
    setData(storedData);
  } catch (error) {
    console.error("读取数据失败:", error);
  }
};

为什么这样有效？ #

• 初始化时的useEffect只会执行一次，获取存储中的历史数据，不会触发循环。
• 提交新Todo时，直接更新本地状态data，UI会立即渲染新内容，同时把最新数据同步到AsyncStorage，确保下次打开应用能加载到最新数据。

这样既解决了无限循环的问题，又能让新添加的Todo立即显示在列表中。

内容的提问来源于stack exchange，提问作者Sudhir