J'ai construit un projet MERN où le composantFrindListWidgetest appelé sous 2 conditions.

1. S'il s'agit de laliste d'amisde l'utilisateur, le widget est rendu et le statut dans Reduxuser.friendsest mis à jour.
2. S'il s'agit d'un autre utilisateur, seul le widget sera rendu. L'état Redux n'est pas mis à jour.

Tous lesFriend还包含一个 ，它将添加或删除Friend. Apparemment, tout fonctionnait bien jusqu'à ce que je vérifie l'ongletRéseaudans les outils de développement Chrome. J'ai détectéfriends被无限次调用。为了说清楚，我写了console.log("friends",friends);. Oui, cela a été enregistré à plusieurs reprises. Je partage le code suivant :

FriendListWidget.jsx

//other mui imports import { WidgetWrapper } from "../../../components/StyledComponent/WidgetWrapper"; import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { setFriends as setUsersFriends } from "../../../Redux/Slices/authSlice"; import { userRequest } from "../../../requestMethod"; import Friend from "../../../components/Friend"; const FriendListWidget = ({ userId }) => { const dispatch = useDispatch(); const { palette } = useTheme(); const [friends, setFriends] = useState([]); const user = useSelector((state) => state.user); const getFriends = async () => { const res = await userRequest.get(`/users/${userId}/friends`); const data = await res.data; if (user._id === userId) { dispatch(setUsersFriends({ friends: data })); setFriends(data); } else { setFriends(data); } }; useEffect(() => { getFriends(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [user, userId]); console.log("friends", friends); //This is being logged for infinite times return (   Friend List   {friends.map((friend) => (  ))}   ); }; export default FriendListWidget;

Friend.jsx

//other mui imports import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { userRequest } from "../../requestMethod"; import { setFriends } from "../../Redux/Slices/authSlice"; import { FlexBetween } from "../StyledComponent/FlexBetween"; import UserImage from "../StyledComponent/UserImage"; const Friend = ({ friendId, name, location, userPicturePath }) => { const dispatch = useDispatch(); const navigate = useNavigate(); const { _id } = useSelector((state) => state.user); const friends = useSelector((state) => state.user.friends); const { palette } = useTheme(); const primaryLight = palette.primary.light; const primaryDark = palette.primary.dark; const main = palette.neutral.main; const medium = palette.neutral.medium; const isFriend = friends.find((friend) => friend._id === friendId); const isUser = friendId === _id; const patchFriend = async () => { const res = await userRequest.patch(`/users/${_id}/${friendId}`); const data = await res.data; dispatch(setFriends({ friends: data })); }; return (     { navigate(`/profile/${friendId}`); navigate(0); }} >  {name}   {location}    {!isUser && (  patchFriend()} sx={{ backgroundColor: primaryLight, p: "0.6rem" }} > {isFriend ? (  ) : (  )}  )}  ); }; export default Friend;

userRequestn'est qu'une méthode axios :

export const userRequest = axios.create({ baseURL: BASE_URL, headers: { token: `Bearer ${token}` }, });

J'ai essayé de supprimer la dépendance dans le hook useEffect :

useEffect(() => { getFriends(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []);

Cependant, il n'est rendu qu'une seule fois. Il n'affichera pas les mises à jour via pendant l'exécution. Je dois recharger la fenêtre pour voir les mises à jour.

useEffect(() => { getFriends(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [userId]);