Почему я получаю бесконечный цикл, когда я обновляю объект с помощью setState?
Я пытаюсь изменить имя класса, используя имя класса библиотеки. И у меня возникла проблема при обновлении данных моего объекта для сохранения состояния className. Я уверен, что это не проблема с именем класса библиотеки. Кто-нибудь может мне помочь?
export default function Sidebar() {
const [active, setActive] = useState({
home: false,
category: false,
product: false,
order: false,
});
const handleActive = (name) => {
setActive({
...active,
[name]: !active[name],
});
};
return (
<Col md = {2} id = "sidebar">
<ul>
<li className = {classNames({ active: active.home })} onClick = {handleActive("home")}>
<NavLink to = {`/home`}> Home </NavLink>
</li>
<li className = {classNames({ active: active.category })} onClick = {handleActive("category")}>
<NavLink to = {`/category`}> Category </NavLink>
</li>
<li className = {classNames({ active: active.product })} onClick = {handleActive("product")}>
<NavLink to = {`/product`}> Product </NavLink>
</li>
<li className = {classNames({ active: active.order })} onClick = {handleActive("order")}>
<NavLink to = {`/order`}> Order </NavLink>
</li>
</ul>
</Col>
);
}
Ошибка: слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.
Ответы 1
ПРОБЛЕМА
Вы вызываете функцию прямо здесь onClick = {handleActive("order")}, которая запускает несколько повторных рендеров.
Что вы говорите коду здесь, давайте вызывать обработчик onClick всякий раз, когда компонент монтируется.
РЕШЕНИЕ
() => handleActive("home") назначьте функцию обработчикам onClick следующим образом.
Что вы говорите коду здесь, так это то, что я назначаю функцию обработчикам onClick, вызываю функцию всякий раз, когда кто-то щелкает элемент.
<li className = {classNames({ active: active.home })} onClick = {() => handleActive("home")}>
<NavLink to = {`/home`}> Home </NavLink>
</li>
@Cyan В вашем случае вы предоставляете ссылку, поэтому она будет отображаться бесконечно. Когда вы сделаете функцию стрелки, она будет работать.
Спасибо, я привык пользоваться
onClick = {handleClick}, а теперь знаю по-другомуonClick = {handleClick()}