При добавлении нового элемента через useState, элемент добавляется 2 раза. JS, React

Рейтинг: 0Ответов: 1Опубликовано: 29.06.2023

мне нужно при нажатии на элемент, добавлять строку в массив, Однако вместо одного раза, строка добавляется 2 раза. Далее, при повторном нажатии, мне нужно удалить этот элемент из массива, но если я добавляю условие, то на выходе массив пустой, предполагаю что ошибка связанна с первой проблемой

  const [filter, setFilter] = useState(['fsdsf', 'fsfsf']);

  function handlePushItem() {
    setFilter([...filter, itemEn ]);
    
    // if (filter.includes(itemEn)) {
    //   setFilter(filter.filter((obj) => obj !== itemEn));
    // } else {
    //   setFilter(filter.concat(itemEn));
    // }

  }
console.log(filter) // ['fsdsf', 'fsfsf', itemEn] // ['fsdsf', 'fsfsf', itemEn, itemEn] 

  return (
    <li className="catalog-filter__item catalog-filter__item--second-level" onClick={handlePushItem}>
      <div className="custom-toggle custom-toggle--checkbox">
        <input type="checkbox" value={itemRu} id={itemRu} name="catalog-second-level" />
        <label className="custom-toggle__label" htmlFor={itemRu}>{itemRu}</label>
      </div>
    </li>
  );
}

Я только учусь и буду очень благодарна за вашу помощь

reactjs usestate
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

не очень понятно что еще добавить

Пример тестовый нужно делать... Вот пример реализации работы с фильтром. Вроде на твои куски похоже.

const arr = ['Фильтр 1', 'Фильтр 2', 'Фильтр 3']

//
function App() {
  const [filter, setFilter] = React.useState([])
  return <div>
    <Filter act={setFilter} />
    <ul>
      {filter.map(el => <li key={el}>{el}</li>)}
    </ul>
  </div>
}
//
function Filter(props) {
  const {act} = props
  return <ol>  
    {arr.map(el => <Item key={el} data={el} act={act} />)}
  </ol>
}
//
function Item(props) {
  const {data, act} = props
  const id = React.useId()
  const r = React.useRef()
  const handlePushItem = e => {
    if (r.current.checked) act(old => [...old, data])
    else act(old => old.filter(v => v != data))
  }
  return <li onClick={handlePushItem}>
    <div>
      <input type="checkbox" ref={r} id={id} />
      <label htmlFor={id}>{data}</label>
    </div>
  </li>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>