React中useEffect未更新组件，收藏食谱删除后卡片不消失

核心问题分析 #

删除收藏后favorite数组已更新，但页面卡片未消失，原因在于：

1. getRecipe函数每次执行时仅往recipes数组追加新数据，未清空旧数据，导致已删除的食谱信息仍留存
2. 依赖recipes更新的newrecipes无法同步移除已删除的项

修复步骤及代码修改 #

1. 重置recipes数组，避免数据累加

每次基于最新favorite数组请求数据前，先清空recipes，同时用Promise.all批量处理异步请求，保证状态更新的可控性：

const getRecipe = () => {
    // 先清空旧数据
    setRecipes([]);
    // 批量请求所有收藏的食谱
    Promise.all(favorite.map(id => getRecipeInfo(id)))
        .then(responses => {
            const newRecipes = responses.map(res => ({
                id: res.data.id,
                title: res.data.title,
                image: res.data.image
            }));
            setRecipes(newRecipes);
        })
        .catch(error => console.log(error));
}

2. 简化状态层级（去掉冗余的newrecipes）

由于favorite数组中的ID本身是唯一的，请求返回的recipes不会有重复项，可直接删除去重逻辑，用recipes直接渲染：

• 移除newrecipes相关状态和去重的useEffect
• 渲染时直接使用recipes.map

3. 简化删除逻辑（可选）

用filter方法替代切片操作，代码更简洁：

const removeFavorite = (id) => {
    const newFavoriteList = favorite.filter(item => item !== id);
    setFavorite(newFavoriteList);
    saveToLocalStorage(newFavoriteList);
}

完整修复后的代码 #

import React, { useContext, useEffect, useState } from 'react';
import Navbar from '../../components/Navbar/Navbar';
import FavoritesContext from '../../FavoritesContext';
import { Link } from 'react-router-dom';
import { BsFillTrashFill } from 'react-icons/bs';
import './Favorites.css';
import { getRecipeInfo } from '../../api';

function Favorites() {
    const { favorite, setFavorite } = useContext(FavoritesContext);
    const [recipes, setRecipes] = useState([]);

    // 批量请求收藏的食谱
    const getRecipe = () => {
        setRecipes([]);
        Promise.all(favorite.map(id => getRecipeInfo(id)))
            .then(responses => {
                const newRecipes = responses.map(res => ({
                    id: res.data.id,
                    title: res.data.title,
                    image: res.data.image
                }));
                setRecipes(newRecipes);
            })
            .catch(error => console.log(error));
    }
    
    useEffect(() => {
        getRecipe()
    },[favorite])

    const saveToLocalStorage = (items) => {
        localStorage.setItem('favorites-recipes', JSON.stringify(items))
    }

    const removeFavorite = (id) => {
        const newFavoriteList = favorite.filter(item => item !== id);
        setFavorite(newFavoriteList);
        saveToLocalStorage(newFavoriteList);
    }

    return (
        <div>
            <Navbar />
            <div className='main-container'>
                <h2>Favorites</h2>
                <div className='favorites-cnt'>
                    {recipes.map((recipe) => {
                        return (
                            <div key={recipe.id}>
                                <div className='favorite-page'>
                                    <div className='favorite-info'>
                                        <Link to={'/recipe/' + recipe.id} style={{ textDecoration: 'none' }}>
                                            <h3>{recipe.title}</h3>
                                        </Link>
                                    </div>
                                    <img src={recipe.image} className='favorite-image' alt=''/>
                                    <div className='favorite-trash' onClick={() => removeFavorite(recipe.id)}>
                                        <BsFillTrashFill size={"70px"}/>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}

export default Favorites

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