reactjs - 为什么我的 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;

我正在尝试设置 Hook 中的值，比较事件 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 会在这两种条件下不断地设置钩子(Hook)值 yes 和 no。一直被困在这个时间里。

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

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

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