React Hooks：如何避免初始渲染时重复调用AsyncStorage.setItem

这个问题我之前也碰到过，核心就是要区分初始加载带来的状态更新和用户操作触发的状态更新，咱们可以通过一个简单的标记来实现，只在用户主动修改 logs 时才调用 AsyncStorage.setItem。

修改后的完整代码： #

const AsyncStorage = require("@react-native-community/async-storage")
const useStore = () => {
  const [logs, setLogs] = useState([])
  // 用 ref 标记是否是用户触发的状态更新
  const isUserInitiatedUpdate = useRef(false)

  useEffect(() => {
    // 读取存储时解析字符串，处理空值情况
    AsyncStorage.getItem("logs")
      .then((storedLogs) => {
        const parsedLogs = storedLogs ? JSON.parse(storedLogs) : [];
        setLogs(parsedLogs);
      });
  }, [])

  useEffect(() => {
    // 只有用户触发的更新才执行保存
    if (isUserInitiatedUpdate.current) {
      AsyncStorage.setItem("logs", JSON.stringify(logs));
      // 重置标记，避免后续重复触发
      isUserInitiatedUpdate.current = false;
    }
  }, [logs])

  const addLog = (newText) => {
    // 标记为用户触发的更新
    isUserInitiatedUpdate.current = true;
    setLogs(prevLogs => [
      {text: newText, createdAt: new Date().getTime()},
      ...prevLogs,
    ]);
  }

  // 其他所有更新 logs 的函数，都要先设置这个标记
  // 比如：
  // const deleteLog = (index) => {
  //   isUserInitiatedUpdate.current = true;
  //   setLogs(prevLogs => prevLogs.filter((_, i) => i !== index));
  // }

  return {
    logs,
    addLog,
    // ...many other functions that update logs
  }
}

为什么这个方案有效？ #

• 初始渲染时，logs 先被设为 []，此时 isUserInitiatedUpdate.current 是 false，所以不会执行 setItem。
• 当从 AsyncStorage 读取到数据并更新 logs 时，这属于初始加载的更新，标记依然是 false，同样不会触发保存。
• 只有当用户调用 addLog 或其他你定义的更新函数时，标记会被设为 true，此时状态更新会触发 useEffect 执行 setItem，完成后重置标记，确保下次非用户触发的更新不会重复执行保存。

另外还要注意：原代码里直接把 getItem 返回的结果传给 setLogs，但 AsyncStorage 存储的是字符串，所以一定要用 JSON.parse 解析，还要处理存储为空（返回 null）的情况，避免报错。

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