React Redux中useEffect触发无限dispatch问题求助

你的代码出现无限dispatch的核心原因是useEffect的依赖数组中包含了featured：

• 当userInfo存在时，调用dispatch(listFeatured())会更新redux中的featured状态
• 由于featured是useEffect的依赖项，状态更新会触发useEffect重新执行
• 此时userInfo仍然存在，会再次调用dispatch(listFeatured())，形成无限循环

将逻辑拆分为两个独立的useEffect，分别处理请求触发和状态赋值：

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { WEIGHTS } from '../constants';
import { listFeatured } from '../actions/featuredActions';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';


const Featured = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const [home, setHome] = useState();

    const userLogin = useSelector((state) => state.userLogin);
    const { userInfo } = userLogin;

    const featured = useSelector((state) => state.featuredList.featured);

    // 仅在userInfo变化时触发请求
    useEffect(() => {
        if(userInfo) {
            dispatch(listFeatured())
        } else {
             navigate('/')
        }
    }, [dispatch, navigate, userInfo])

    // 监听featured变化，更新home状态
    useEffect(() => {
        if (featured) {
            setHome(featured.featured_home)
        }
    }, [featured])


    return(
        <Wrapper>
            <h1></h1>
        </Wrapper>
        
    )
}

const Wrapper = styled.div`
    display: flex;
    padding: 20px 20px;
    flex-direction: column;
    margin-top: 100px;
    justify-content: center;
    align-items: center;
`;

export default Featured;

拆分后逻辑更清晰：

• 第一个useEffect只在userInfo变化时执行，避免重复触发请求
• 第二个useEffect仅在featured状态更新时执行赋值操作，不会触发请求循环

同时优化了useSelector的写法，直接获取目标状态值，减少不必要的组件重渲染。

内容的提问来源于stack exchange，提问作者NroGamerz