无法根据来自另一个本地状态的值过滤掉 redux 状态

Question

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

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

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

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

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

for 循环不return 过滤任何内容。在你的情况下，你可以这样做：

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

Answer 2

您可以直接找到不匹配的类别，而不是（创建 filterCategories 然后选择第一个类别）。这是实现。

const handleAddCat = ( e ) => {

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

  }
}

无法根据来自另一个本地状态的值过滤掉 redux 状态

Unable to filter out redux state based on values from another local state

javascript

state

reactjs

redux

react-hooks