как изменить стейт правильно в реакт?

Question

у меня ошибка стейт изменятся после двух нажатий кто может помочь помогите пж)

home.jsx

Categories.jsx

import React, {useEffect, useState,} from 'react';

    const Categories = ({changeCategoryTitle,wht}) => {

    const items = ['Все', 'Мясные', 'Вегетарианская ', 'Гриль', 'Острые', 'Закрытые']

    useEffect(() => {
        let items = document.querySelectorAll('.categories__item')
        items[0].classList.add('active')

        items.forEach((item) => {
            item.addEventListener('click', function (currentItem) {

                items.forEach(item => {
                    item.classList.remove('active')
                })
                currentItem.target.classList.add("active");
            })
        })

    }, [])


    return (
        <div className="categories">
            <ul>
                {items.map((item, i) => (
                    <li key={i} onClick={() => {
                        changeCategoryTitle(i)
                        console.log(i)
                        wht(i)
                    }} className="categories__item">{item}</li>
                ))}
            </ul>
        </div>
    );
};

export default Categories;

Answer 1

как изменить стейт правильно в реакт?

Предложу такой вариант работы со стейтом...

let root = document.querySelector('#root');
root = ReactDOM.createRoot(root);
root.render(<Test />);

function Test(props) {
  const [items, setItems] = React.useState(['Все', 'Мясные', 'Вегетарианская ', 'Гриль', 'Острые', 'Закрытые'])
  const [act, setAct] = React.useState(null)
  return (
  <div className="categories">
    <ul>
      {items.map((item, i) => {
        let cls = ['categories__item']
        if (i === act) cls.push('active')
        cls = cls.join(' ')
        return (
          <li key={i} className={cls} onClick={_ => setAct(i)}>{item}</li>
        )
      })}
    </ul>
  </div>
  );
}

.active {
  color: red;
}

<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="root"></div>

БЛОГ НА HUSL

как изменить стейт правильно в реакт?

home.jsx

Categories.jsx

Ответы (1 шт):