Reactjs 为什么我在React JS中的代码会进入满足这两个条件的无止境循环?

Reactjs 为什么我在React JS中的代码会进入满足这两个条件的无止境循环?,reactjs,firebase,react-hooks,Reactjs,Firebase,React Hooks,import React,{useffect,useState}来自“React”; 从“react redux”导入{connect}; 从“react router dom”导入{Redirect}; 从“../../config/firebaseConfig”导入firebase 从“/SingleEventSummary”导入SingleEventSummary 从“/./../store/actions/eventActions”导入{getEvent}; 导入“/SingleEven

import React,{useffect,useState}来自“React”;
从“react redux”导入{connect};
从“react router dom”导入{Redirect};
从“../../config/firebaseConfig”导入firebase
从“/SingleEventSummary”导入SingleEventSummary
从“/./../store/actions/eventActions”导入{getEvent};
导入“/SingleEvent.css”;
const SingleEvent=props=>{
const id=props.match.params.id;
const[eventItem,seteventItem]=useState([]);
const[isfavorite,setisfavorite]=使用状态(“否”);
//获取特定事件
useffect(()=>{
const db=firebase.firestore().collection('newEvents').doc(id)
db.onSnapshot(快照=>{
seteventItem(snapshot.data())
})
},[id])
//检查是否有收藏夹
useffect(()=>{
const db=firebase.firestore().collection('users').doc(props.auth.uid)
db.get().then(快照=>{
const data=snapshot.data()
const faves=data&&snapshot.data()
faves.includes(id)?setisfavorite(“是”):setisfavorite(“否”)
},(错误)=>控制台错误(错误))
},[IsFavorite])
//设置为收藏夹
常量收藏夹单击=(uid,eid)=>{
调试器;
让initFav=firebase.firestore().collection('users').doc(uid);
initFav.get().then(快照=>{
const arrayUnion=firebase.firestore.FieldValue.arrayUnion(eid);
initFav.update({
最爱:arrayUnion,
});
setisfavorite(“是”)
},(错误)=>控制台错误(错误))
}
//删除收藏夹
常量RemoveFavorite=()=>{
调试器;
const initFavo=firebase.firestore().collection('users').doc(props.auth.uid);
initFavo.get().then(快照=>{
if(snapshot.data().favorites){
if(snapshot.data().favorites.includes(id)){
让data=snapshot.data().favorites.filter(el=>el!=id)
initFavo.update({
收藏夹:数据,
});
setisfavorite(“否”)
}
}
},(错误)=>控制台错误(错误))
return()=>initFavo()
}
log(“wtf就是这个狗屎”,是我最喜欢的)
如果(isFavorite==“否”){
返回(
添加为收藏夹!!
);
}
否则{
返回(
最受欢迎的活动!!
从收藏夹中删除!!
);
} 
};

导出默认单事件JU提供了一点重构->这只是更容易阅读

useEffect(() => {
  const db = firebase.firestore().collection('users').doc(props.auth.uid)

  db.onSnapshot(snapshot => {
    const data = snapshot.data()
    const faves = data && snapshot.data().favorites || []

    faves.includes(id) ? setIsFavourite("yes") : setIsFavourite("no")
  },(error) => console.error(error))

  return () => db()
},[])

我不明白为什么你的代码会循环,也许我们需要更多的代码,正如上面的评论所提到的。

jus提供了一些重构->这只是更容易阅读

useEffect(() => {
  const db = firebase.firestore().collection('users').doc(props.auth.uid)

  db.onSnapshot(snapshot => {
    const data = snapshot.data()
    const faves = data && snapshot.data().favorites || []

    faves.includes(id) ? setIsFavourite("yes") : setIsFavourite("no")
  },(error) => console.error(error))

  return () => db()
},[])

我不明白为什么你的代码会循环,也许我们需要更多的代码,正如上面的评论所提到的。

如果你在
setisfavorite()
中更新firebase,那么你正在创建一个更改,它将被
.onSnapshot
侦听器接收。这将强制执行一个无休止的循环:条件触发器更改>侦听条件>条件触发器更改>无限


您需要从
.onSnapshot
切换到一次性
.get
侦听器,或者需要添加一个条件,以防止在这种情况下传播更改。这个自定义条件将特定于您的实现,而不是我们可以帮助的东西,除非您演示如何使用更多代码并帮助我们理解您试图实现的目标(但这应该是一个单独的问题)。因此,我怀疑在本例中是前者。

如果您在
setisfavorite()
中更新firebase,则您正在创建一个更改,该更改将由
.onSnapshot
侦听器拾取。这将强制执行一个无休止的循环:条件触发器更改>侦听条件>条件触发器更改>无限


您需要从
.onSnapshot
切换到一次性
.get
侦听器,或者需要添加一个条件,以防止在这种情况下传播更改。这个自定义条件将特定于您的实现,而不是我们可以帮助的东西,除非您演示如何使用更多代码并帮助我们理解您试图实现的目标(但这应该是一个单独的问题)。所以我怀疑在这种情况下是前者。

这个钩子应该有一个停止条件,
useffect
钩子在每次渲染某个东西时都会被触发,所以你最终会更改道具和渲染,然后触发
useffect
,它会更改道具并触发
render
生命周期钩子

你应该有那样的东西

useEffect(() => {
  // call database
},[setFavorite]) // here goes stop condition for useEffect
如果
setFavorite
仍为
false
则不会再次触发,或者,如果
setFavorite
为false,并且来自db的请求将其设置为
true
,那么下次如果再次触发
useffect
,并且
setFavorite
仍为
true
,则
useffect
将不会执行


要了解更多详细信息,请阅读官方文档

您应该对此挂钩有一个停止条件,
useffect
挂钩在每次渲染某物时都会被触发,因此您最终会更改道具和渲染,然后触发
useffect
,从而更改道具并触发
render
生命周期挂钩

你应该有那样的东西

useEffect(() => {
  // call database
},[setFavorite]) // here goes stop condition for useEffect
如果
setFavorite
仍为
false
则不会再次触发,或者,如果
setFavorite
为false,并且来自db的请求将其设置为
true
,那么下次如果再次触发
useffect
,并且
setFavorite
仍为
true
,则
useffect
将不会执行


有关更多详细信息,请阅读官方文档

好,现在您已经向我们展示了更多代码。我可以非常自信地说,这是因为您在单击“添加为收藏夹”按钮时调用了FavoriteClick

这导致了一个奇怪的循环。 改变


不客气

现在,您已经向我们展示了更多代码。我可以很有信心地说