React useState未触发重渲染及添加依赖后无限循环问题求助

核心问题 #

1. 未监听props变化：Favorites组件的useEffect依赖为空数组，仅在组件挂载时执行一次。但App组件中user是从localStorage异步加载的，初始user.favMovies为undefined，后续user更新后，Favorites无法感知favMovies的变化，因此不会重新获取数据。
2. 冗余state引发循环：你创建的myList本地state完全是多余的——它只是favMovies的副本，当你把myList加入useEffect依赖时，setMyList会修改myList，进而触发useEffect再次执行，形成无限循环。

修改后的代码 #

1. 优化Favorites组件（移除冗余state，正确监听props）

import React, { useEffect, useState } from "react";
import axios from "axios";
import Modal from "../Modal";

const Favorites = ({ user, favMovies }) => {
    const [favsList, setFavsList] = useState([]);

    const getData = async () => {
        // 边界处理：避免空数组/undefined发起无效请求
        if (!favMovies || favMovies.length === 0) {
            setFavsList([]);
            return;
        }
        const response = await axios.post('/api/favs', { favMovies });
        setFavsList(response.data.favsList);
    };

    // 监听favMovies变化，自动触发数据获取
    useEffect(() => {
        getData();
    }, [favMovies]);

    // 补充渲染逻辑（原代码缺失，需根据实际需求调整）
    return (
        <div className="favorites-container">
            {favsList.length === 0 ? (
                <p>No tienes películas favoritas aún</p>
            ) : (
                <div className="movies-grid">
                    {favsList.map(movie => (
                        <div key={movie.id} className="movie-card">
                            <h3>{movie.title}</h3>
                            {/* 其他电影信息渲染 */}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default Favorites;

2. App组件补充边界处理

function App() {
    const [user, setUser] = useState({});

    useEffect(() => {
        const loggedinUser = localStorage.getItem('user');
        if (loggedinUser) {
            const parsedUser = JSON.parse(loggedinUser);
            setUser(parsedUser);
            // 注意：setState是异步操作，直接console.log(user)拿不到最新值，打印parsedUser即可
            console.log(parsedUser);
        }
    }, []);

    return (
        <Router>
            <Navbar {...user} setUser={setUser}/>
            <Routes>
                {/* 其他路由保持不变 */}
                {/* 给favMovies设置默认空数组，避免传递undefined */}
                <Route path='/favs' element={<Favorites user={user} favMovies={user.favMovies || []}/>}/>
            </Routes>
        </Router>
    );
}

export default App;

为什么这样改？ #

• 移除myList：直接使用父组件传递的favMovies props，避免了本地state与props不同步的问题，也消除了引发无限循环的根源。
• 依赖favMovies：当App组件中user加载完成、favMovies从undefined变为实际ID数组时，useEffect会自动触发getData，获取最新的收藏电影列表。只有当favMovies的内容或引用发生变化时，才会重新执行，不会产生无限循环。
• 边界处理：通过user.favMovies || []确保传递给Favorites的favMovies始终是数组类型，同时在getData中先判断有效性，避免无效请求。

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