React开发中数组数据变化时如何自动触发指定函数执行？

第一步：基础初始化与自动刷新逻辑 #

你当前的代码缺少组件首次加载时拉取本地存储数据的逻辑，我们可以通过useEffect空依赖配置实现挂载时自动执行refreshData，同时解决删除后刷新的问题：

import { useState, useEffect } from 'react';

const FavRecipes = () => {
    const [recipeArray, setRecipeArray] = useState([]);

    const refreshData = () => {
        const existedFavRecipe = localStorage.getItem("FavRecipes");
        const data = existedFavRecipe !== null ? JSON.parse(existedFavRecipe) : [];
        setRecipeArray(data);
    }

    // 组件挂载时自动执行一次refreshData加载本地数据
    useEffect(() => {
        refreshData();
    }, []); // 空依赖数组代表仅在组件挂载和卸载时执行副作用

    // 删除食谱示例逻辑
    const deleteFav = (recipeId) => {
        // 1. 过滤掉要删除的食谱
        const newFavList = recipeArray.filter(item => item.id !== recipeId);
        // 2. 更新localStorage
        localStorage.setItem("FavRecipes", JSON.stringify(newFavList));
        // 3. 直接调用refreshData刷新列表
        refreshData();
    }

    return (
        <FavRecipesContainer>           
            {recipeArray.map(e => (
                // 注意：map渲染列表必须加唯一key属性，否则React会抛出警告
                <div key={e.id}>
                    <FavRecipeImage src={e.image} />
                    <FavRecipeTitle>{e.title}</FavRecipeTitle>
                    {/* 绑定删除事件 */}
                    <button onClick={() => deleteFav(e.id)}>删除收藏</button>
                </div>
            ))}
        </FavRecipesContainer>
    )
}

第二步：跨组件修改自动同步（可选） #

如果你的删除按钮在其他页面/组件（比如食谱详情页），想要收藏页自动感知localStorage变化更新，可以在useEffect中添加storage事件监听：

useEffect(() => {
    // 组件挂载时先加载一次数据
    refreshData();
    // 监听localStorage变化，其他页面修改收藏时自动触发刷新
    const handleStorageChange = (e) => {
        if (e.key === "FavRecipes") {
            refreshData();
        }
    };
    window.addEventListener('storage', handleStorageChange);
    // 组件卸载时移除监听器，避免内存泄漏
    return () => {
        window.removeEventListener('storage', handleStorageChange);
    };
}, []);

注意事项 #

• map渲染列表必须绑定唯一key属性，优先使用食谱的唯一id，不要用数组下标作为key
• 如果是单页应用内同页面的删除操作，直接调用refreshData即可，不需要额外加storage监听

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