Reactjs 在react函数类中使用useEffect将数据写入firebase

代码持久地将数据存储在Firebase中，这正是我在每次会话后想要的，但这是有问题的，因为

setOnes（[…ones，1]）

和

writeToFirebase

由于异步，不应该在相同的函数下调用，但每次我尝试

useffect（（）=>writeToFirebase（），[setOnes]））

为了获得与组件diddupdate类似的结果，它在启动之初就被触发，并重置到FB数据库返回到[1,1]。这是我的代码，代码沙盒链接：

const App2=（）=>{
const[one，setone]=useState（[1,1]）；
useffect（（）=>{
Firebase.initializeApp（配置）
getFromFirebase（）
}, []);
//useEffect（（）=>writeToFirebase（），[SetOne]）
常量writeToFirebase=（）=>{
Firebase.database（）
.ref（“/”）
.一套（一套）；
console.log（“保存的数据”）；
};
常量getFromFirebase=（）=>{
设ref=Firebase.database（）.ref（“/”）；
参考on（“值”，快照=>{
const state=snapshot.val（）；
setOnes（州）
})
}
常数handleAdd=（）=>{
setOnes（[…ones，1]）
writeToFirebase（）
}
const list=one.map（（e，i）=>）
{e}
))
报税表（
{list}
添加
)
}
导出默认App2；

您应该编写useEffect（（）=>writeToFirebase（），[ones]），而不是 //useEffect（（）=>writeToFirebase（），[SetOne]）

---

useEffect（（）=>writeToFirebase（），[ones]）意味着每次更改时都会执行writeToFirebase。ones是这里的状态变量，setOnes是一个函数。

不要使用

setOnes

作为使用效果的依赖项，请使用

ones

。 完整代码如下所示

const App2 = () =>{
  
  const [ones, setOnes] = useState([1,1]);
  useEffect(() => {
    Firebase.initializeApp(config)
    getFromFirebase()
  }, []);

  useEffect(()=>writeToFirebase(),[ones])

  const writeToFirebase = () => {
    Firebase.database()
      .ref("/")
      .set(ones);
    console.log("DATA SAVED");
  };

  const getFromFirebase = () => {
    let ref = Firebase.database().ref("/");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      setOnes(state)
    })
  }

  const handleAdd =() => {
    setOnes([...ones,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;

const App2 = () =>{
  
  const [ones, setOnes] = useState([1,1]);
  const isInitialMount = useRef(true);
  useEffect(() => {
    Firebase.initializeApp(config)
    getFromFirebase()
  }, []);

  
  useEffect(() => {
  if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
     writeToFirebase();
    }
  }, [ones]);

  const writeToFirebase = () => {
    Firebase.database()
      .ref("/")
      .set(ones);
    console.log("DATA SAVED");
  };

  const getFromFirebase = () => {
    let ref = Firebase.database().ref("/");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      setOnes(state)
    })
  }

  const handleAdd =() => {
    setOnes([...ones,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

---

抱歉，我已经尝试过了，但它似乎不起作用，我认为当

setOnes

时，它也会更改

Ones

的状态，因此useffect在启动之初仍然运行

writeToFirebase（）

。感谢您的回答，这是对我的代码常量isInitialMount=useRef（true）的修复；useffect（（）=>{if（isInitialMount.current）{isInitialMount.current=false；}else{writeToFirebase（）}，[ones]）；谢谢，它可以工作了，谢谢你的回答和到另一个页面的链接，我使用

useRef

只运行write-on-update！欢迎@carterx，请将答案标记为其他用户接受。

const App2 = () =>{
  
  const [ones, setOnes] = useState([1,1]);
  const isInitialMount = useRef(true);
  useEffect(() => {
    Firebase.initializeApp(config)
    getFromFirebase()
  }, []);

  
  useEffect(() => {
  if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
     writeToFirebase();
    }
  }, [ones]);

  const writeToFirebase = () => {
    Firebase.database()
      .ref("/")
      .set(ones);
    console.log("DATA SAVED");
  };

  const getFromFirebase = () => {
    let ref = Firebase.database().ref("/");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      setOnes(state)
    })
  }

  const handleAdd =() => {
    setOnes([...ones,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