无法基于本地状态值过滤Redux状态，点击按钮重复添加分类如何解决？

问题根源 #

你代码的核心错误出在filter方法的回调逻辑上：

• 你在for...of循环中直接return了判断结果，这会导致每次只比对catCopy的第一个元素就终止循环，根本不会检查后续元素是否和当前遍历的categories元素重复。
  比如当catCopy = [1,2]时，判断categories中的元素2是否要被过滤掉时，循环先取到catCopy的第一个元素1，直接返回2 !== 1的结果true，所以元素2会被保留在过滤结果中，导致重复添加。

除此之外还有两个隐藏问题：

1. useEffect的依赖数组为空，如果categories是异步从接口获取的，useEffect触发时categories可能还没加载完成，会导致初始本地状态赋值失败
2. 没有处理所有分类都已添加完成的边界情况，此时过滤结果为空，直接取filterCategories[0]会拿到undefined插入本地状态

修正代码 #

1. 修正useEffect依赖 #

const [ catItems, setCatItems ] = useState( [] );

useEffect(() => {
     if (categories?.length) {
           setCatItems( [ categories[0] ] );
     }    
}, [categories]); // 把categories加入依赖数组，数据加载完成后会重新执行初始化

2. 修正点击事件的过滤逻辑 #

const handleAddCat = (e) => {
    if (!categories?.length) return;

    // 用数组some方法判断是否已存在，会遍历所有元素完成比对，避免提前终止的问题
    const filterCategories = categories.filter(item => {
        return !catItems.some(el => el.category === item.category);
    });

    // 先判断是否还有可添加的分类，避免插入undefined
    if (filterCategories.length) {
        // 基于之前的状态更新，用函数式更新更稳妥
        setCatItems(prev => [...prev, filterCategories[0]]);
    }
}

内容的提问来源于stack exchange，提问作者s.khan