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

Question

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import firebase from '../../config/firebaseConfig'

import SingleEventSummary from './SingleEventSummary'

import { getEvent } from "./../../store/actions/eventActions";

import "./SingleEvent.css";
const SingleEvent = props => {
	const id = props.match.params.id;

	const [eventItem, seteventItem] = useState([]);
	const [isFavourite, setIsFavourite] = useState("no");

	//getting specific event
	useEffect(() => {

		const db = firebase.firestore().collection('newEvents').doc(id)

		db.onSnapshot(snapshot => {
			seteventItem(snapshot.data())
		})
	}, [id])

	//checking if there is favourite
	useEffect(() => {
		const db = firebase.firestore().collection('users').doc(props.auth.uid)
	  
		db.get().then(snapshot => {
		  const data = snapshot.data()
		  const faves = data && snapshot.data().favorites || []
	  
		  faves.includes(id) ? setIsFavourite("yes") : setIsFavourite("no")
		},(error) => console.error(error))
	  },[isFavourite])
    

	//setting as favourites
	const favouriteClick = (uid, eid) => {
		debugger;
		let initFav = firebase.firestore().collection('users').doc(uid);
		initFav.get().then(snapshot => {
			const arrayUnion = firebase.firestore.FieldValue.arrayUnion(eid);
			initFav.update({
				favorites: arrayUnion,
			});
			setIsFavourite("yes")
		},(error) => console.error(error))
	}

	//remove favourites
	const removeFavourite = () => {
		debugger;
		const initFavo = firebase.firestore().collection('users').doc(props.auth.uid);
		initFavo.get().then(snapshot => {
			if (snapshot.data().favorites) {
				if (snapshot.data().favorites.includes(id)) {
					let data = snapshot.data().favorites.filter(el => el != id )
					initFavo.update({
						favorites: data,
					});
					setIsFavourite("no")
				}
			}
		},(error) => console.error(error))
		return () => initFavo()
	}

	console.log("wtf is this shit", isFavourite)
  
	if (isFavourite == "no") {
		return (
			<main className="single-event_main">
				<a className="waves-effect waves-light btn" onClick={favouriteClick(props.auth.uid, id)}>Add As Favourites!!</a>
			</main>
		);
}
	 else {
		return (
			<main className="single-event_main">
				<div className="row">
					<div className="col s6">
						<a className="waves-effect waves-light btn" disabled>Favourite Event!!</a>
					</div>
					<div className="col s6">
						<a className="waves-effect waves-light btn" onClick={removeFavourite}>Remove From Favourites!!</a>
					</div>
				</div>
			</main>
		);
	} 
};

export default SingleEvent;

我正在尝试设置挂钩中的值，比较用户数据库中是否存在事件 ID（如果他/她已将该事件设置为收藏夹）。

....
const [isFavourite, setIsFavourite] = useState("no");

//checking if there is favourite
useEffect(() => {
    debugger;
    const db = firebase.firestore().collection('users').doc(props.auth.uid)
    db.onSnapshot(snapshot => {
        debugger;
        if(snapshot.data()) {
            if (snapshot.data().favorites) {
                if (snapshot.data().favorites.includes(id)) {
                    setIsFavourite("yes")
                }
                else if(!snapshot.data().favorites.includes(id)){
                    setIsFavourite("no")
                }
            }
        }
    }, (error) => console.error(error));
    return () => db()
},[])
....

问题是，react 在这两种情况下都会无休止地设置钩子值是和否。一直卡在这几个小时。

任何形式的帮助将不胜感激！！！

Answer 1

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

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()
},[])

我不明白为什么你的代码会循环，也许我们需要更多代码，就像上面评论者提到的那样。

Answer 2

如果您正在更新 setIsFavourite() 中的 firebase，那么您正在创建一个将由 .onSnapshot 侦听器接收的更改。这将导致无限循环：条件触发器更改 > 侦听条件 > 条件触发器更改 > 无限循环。

您需要从.onSnapshot 切换到一次性.get 侦听器，或者您需要添加一个条件以防止在这种情况下传播更改。此自定义条件将特定于您的实现，除非您显示使用更多代码并帮助我们了解您要实现的目标（但这应该是一个单独的问题），否则我们实际上无法提供帮助。所以我怀疑在这种情况下是前者。

Answer 3

你应该为这个钩子设置一个停止条件，useEffect 钩子会在你每次渲染时触发，所以你最终会改变 props 和渲染，然后触发 useEffect 改变 props 并触发 render 生命周期钩子。

你应该有类似的东西

useEffect(() => {
  // call database
},[setFavorite]) // here goes stop condition for useEffect

如果setFavorite 仍然是false，它将不会再次触发触发器，或者如果setFavorite 为假并且来自db 的请求将其设置为true，那么下次如果它再次触发useEffect 并且setFavorite 仍然是 true 然后 useEffect 不会执行。

更多详情请阅读官方文档https://reactjs.org/docs/hooks-effect.html

Answer 4

好的，现在您已经向我们展示了更多代码。我可以很有信心地说，这是因为您在“添加为收藏夹”按钮的 onClick 中调用了 favouriteClick。

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

onClick={favouriteClick(props.auth.uid, id)

到

onClick={() => favouriteClick(props.auth.uid, id)

不客气！