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]);

React Hooks 函数内部的陈旧状态

React Hooks stale state inside function

reactjs

react-state-management

react-hooks