React Hooks устаревшее состояние внутри функции

Question

У меня что-то вроде этого

  const [state, setState] = useState({
    num: 0
  });

  const validateBiggerThan0 = () => {
    return state.num > 0;
  };

  const [validation, setValidation] = useState({
    val: validateBiggerThan0
  });

Проблема в том, что когда я вызываю validation.validateBiggerThan0, эта функция не имеет текущего state. В этом простом примере я мог бы передать значение sate.num в качестве параметра validateBiggerThan0, но в моем реальном приложении это невозможно, поскольку у меня есть несколько проверок, а некоторые могут использовать более одного значения из состояния. Есть ли альтернатива этому?

Песочница с проблемой: https://codesandbox.io/s/heuristic-mountain-2poz7?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Решение вашей проблемы - не использовать useState для объекта функции.

const validation = {
  val: validateBiggerThan0
};

Или обновлять объект при каждом изменении вашего состояния:

useEffect(() => {
  setValidation({
    val: validateBiggerThan0
  });
}, [ state, setValidation, validateBiggerThan0 ]);
// Don't remove "state" from the dependency array.

Не забудьте обернуть свои функции проверки в useCallback хук, если вы используете метод useEffect.

const validateBiggerThan0 = useCallback(() => {
  return state.num > 0;
}, [state]);