Не удается обновить состояние в обратном вызове события?

Question

[Shmebilock]

состояние isActive не обновляется при вызове handleClick.

const [isActive, setIsActive] = useState(false);
const [isDisabled, setIsDisabled] = useState(props.disabled);
const switchEl = useRef();

useEffect(() => {
  setIsDisabled(props.disabled);
  if (isDisabled) {
     switchEl.current.removeEventListener('click', handleClick);
  } else {
     switchEl.current.addEventListener('click', handleClick);
  }

  return () => switchEl.current.addEventListener('click', handleClick);
}, [props.disabled])

const handleClick = (event) => {
  event.stopPropagation();
  setIsActive(!isActive);
  props.onChange(!isActive);
  console.log('on click');
};

isActive по-прежнему без изменений после повторного вызова handleClick. это всегда "ложь".

Comments

[Петр Мухуров]

поднимите const handleClick выше, над useEffect

[Петр Мухуров]

а чтобы не писать такие дела

useEffect(() => {
  setIsDisabled(props.disabled);
  if (isDisabled) {
     switchEl.current.removeEventListener('click', handleClick);
  } else {
     switchEl.current.addEventListener('click', handleClick);
  }

  return () => switchEl.current.addEventListener('click', handleClick);
}, [props.disabled])

воткните логику с isDisabled в handleClick

const handleClick = event => {
 if (isDisabled) return false;
...
}

useEffect(() => {
  setIsDisabled(props.disabled);

  return () => switchEl.current.removeEventListener('click', handleClick);
}, [props.disabled])

Answer 1

[Антон Спирин]

Пример упрощения:

const Example = ({ disabled, onChange }) => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = useCallback((e) => {
    e.stopPropagation();
    if (disabled) return;
    setIsActive(!isActive);
    onChange(!isActive);
  }, [isActive, disabled]);

  return <Switch onClick={handleClick} />;
};