无法根据其他本地状态的值筛选出redux状态

Question

所以我有这个API数据，它被存储在redux存储中。然后在useEffect中使用redux状态数据中的第一个元素来设置在初始呈现中使用的本地状态。现在在一个按钮点击处理函数中，我尝试使用这个本地状态来过滤掉redux状态中的数据。然后，应将过滤数据中的第一个元素推送到本地状态。

我将在这里解释代码。假设我像这样从redux store获取API数据：

const categoriesState = useSelector( state => state.getCats );
const { categories } = categoriesState;

然后在useEffect中，我使用categories中的第一个元素存储在本地状态中：

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

useEffect(() => {
     
     if ( categories && categories.length !== 0 ) {
           setCatItems( [ categories[ 0 ] ] );
     }    

}, [] );

然后，catItems被用来渲染一些东西。但也有一个按钮，在点击时，将从categories状态向catItems添加一个新类别，但会忽略其中已有的项目。

下面是click处理程序：

const handleAddCat = ( e ) => {

        if ( categories && categories.length !== 0 ) {

              const catCopy = [ ...catItems ];

              const filterCategories = categories.filter( item => {
                   for ( let el of catCopy ) {
                        return item.category !== el.category;
                   }
              });

              catCopy.push( filterCategories[ 0 ] );

              setCatItems( catCopy );

        }
}

在第一次点击时，过滤器就能完美地工作。但在第二次点击按钮时，我得到了相同的数据。例如，如果本地州的初始数据是1，那么在第一次点击按钮时，我得到的是1和2。但在第二次点击按钮时，我得到的是1，2和2。在随后的点击中添加了2。然而，2应该被过滤掉。然后是3，然后是4，依次类推。

我在这里做错了什么？

Answer 1

您可以只查找不匹配的类别，而不是(创建filterCategories，然后选择第一个)。下面是实现。

const handleAddCat = ( e ) => {

  if ( categories && categories.length !== 0 ) {
    const newCategory = categories.find(category => !cat.includes(category));
    if(newCategory) setCatItems((prevItems) => [...prevItems, newCategory]);

  }
}

Answer 2

for循环不从filter返回任何内容。在您的例子中，您可以这样做：

const filterCategories = categories.filter((item) => {
  return Boolean(catCopy.find((el) => item.category !== el.category));
});