Блог

Итак, у меня есть эти данные API, которые хранятся в магазине redux. Первый элемент в данных о состоянии redux затем используется useEffect для задания локального состояния, используемого при первоначальном рендеринге. Теперь в функции обработчика нажатия кнопки я пытаюсь использовать это локальное состояние для фильтрации данных из состояния redux. Затем первый элемент из отфильтрованных данных должен быть переведен в локальное состояние.

Я объясню код здесь. Предположим, я получаю данные API из магазина redux следующим образом:

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

Затем в useEffect я использую первый элемент из категорий, который будет храниться в локальном состоянии:

 const [ catItems, setCatItems ] = useState( [] );  useEffect(() =gt; {    if ( categories amp;amp; categories.length !== 0 ) {  setCatItems( [ categories[ 0 ] ] );  }   }, [] );  

catItems затем используется для визуализации чего-либо. Но есть также кнопка, которая при нажатии добавит новую категорию catItems в categories состояние «Из», но опустит элемент, который уже находится в нем.

Вот обработчик щелчков:

 const handleAddCat = ( e ) =gt; {   if ( categories amp;amp; categories.length !== 0 ) {   const catCopy = [ ...catItems ];   const filterCategories = categories.filter( item =gt; {  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 и так далее.

Что я здесь делаю не так?

Вы можете просто найти несоответствующую категорию вместо ( создать filterCategories , а затем выбрать первую ). Вот реализация.

 const handleAddCat = ( e ) =gt; {   if ( categories amp;amp; categories.length !== 0 ) {  const newCategory = categories.find(category =gt; !cat.includes(category));  if(newCategory) setCatItems((prevItems) =gt; [...prevItems, newCategory]);   } }  

цикл for ничего не возвращает из фильтра. В вашем случае вы можете сделать что-то вроде этого:

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