无法根据其他本地状态的值过滤掉redux状态

Question

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

我将在这里解释代码。假设我像这样从redux存储中获取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，但将已经在其中的项目删除。

下面是点击处理程序:

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循环没有从过滤器返回任何内容。在您的情况下，您可以这样做:

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