如何在React函数组件中用useEffect正确实现Firebase数据持久化

• 之前尝试用useEffect(()=>writeToFirebase(),[setOnes])完全不生效的原因：
  1. setOnes是useState返回的固定引用，整个组件生命周期内都不会变化，根本没法触发依赖更新的回调逻辑
  2. useEffect在组件挂载完成后必然会先执行一次，没有做拦截的话，启动阶段就会把本地硬编码的初始值[1,1]推送到Firebase，直接覆盖已经存在的真实历史数据
• 之前在handleAdd里同时调用setOnes和writeToFirebase的硬伤：React状态更新是异步批处理的，事件处理函数里直接读取的ones是更新前的旧值，写进Firebase的数据根本不是你刚追加1之后的最新状态，时间久了必然出现本地显示和远端存储不一致的问题。

实现逻辑遵循单向数据流规则：所有本地状态变化触发自动同步，避免在事件处理函数里手动拆分“更新本地状态”和“写远端”两个动作，同时通过标记位拦截首次挂载的误写入逻辑。
修正后的可运行代码如下：

import { useState, useEffect, useRef } from 'react';

const App2 = () => {
  const [ones, setOnes] = useState([1,1]);
  // 标记是否已完成远端初始数据加载
  const isInitialLoaded = useRef(false);

  // 应用启动阶段：初始化Firebase、拉取远端历史数据
  useEffect(() => {
    Firebase.initializeApp(config)
    getFromFirebase()
  }, []);

  // 状态变化自动同步到远端的逻辑
  useEffect(() => {
    // 未加载完远端初始数据前，跳过所有写入操作，避免误覆盖
    if (!isInitialLoaded.current) return;
    Firebase.database()
      .ref("/")
      .set(ones);
    console.log("DATA SAVED");
  }, [ones]);

  const getFromFirebase = () => {
    const ref = Firebase.database().ref("/");
    ref.on("value", snapshot => {
      const remoteData = snapshot.val();
      setOnes(remoteData);
      // 拿到第一份远端数据后，开启后续的自动同步能力
      isInitialLoaded.current = true;
    })
  }

  const handleAdd = () => {
    // 仅做本地状态更新，使用函数式更新拿到最新的状态值，避免闭包读取过期数据
    setOnes(prevOnes => [...prevOnes, 1])
  }
  
  const list = ones.map((e,i) => <div key={e.id}> {e} </div>)

  return ( 
    <div>
      {list}
      <button onClick={handleAdd}>Add</button>
    </div> 
  )
}

export default App2;

• 彻底解耦本地状态更新和远端同步逻辑：handleAdd里只负责更新本地状态，后续的Firebase写入完全由监听ones变化的useEffect统一处理，不存在异步时序问题
• 用useRef存储的加载标记拦截首次渲染：跳过应用启动阶段的无效写入，从根源上解决把初始值[1,1]推到远端覆盖真实数据的问题
• 使用函数式状态更新setOnes(prevOnes => ...)：避免事件处理函数中读取到过期的状态值，保证追加数据的准确性
• 不会出现双向同步死循环：只有用户操作触发本地ones变化时才会写入远端，远端数据推回本地的过程不会触发反向重复写入。

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