函数内部的 React Hooks 陈旧状态答案

【问题标题】：React Hooks stale state inside function函数内部的 React Hooks 陈旧状态
【发布时间】：2020-02-08 11:12:52
【问题描述】：

我有这样的事情

  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

【问题讨论】：

快速解决方案return state ? state.num > 0 : false
@Omer 不明白，在哪里？
在 validateBiggerThan0
@Omer 我想你不明白我的问题。 state 不是 undefined。问题是state.num 没有在validateBiggerThan0 中更新。 @Mat Sz 的回答解决了我的问题

标签： reactjs react-hooks react-state-management

【解决方案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]);

【讨论】：

谢谢，不使用useState 可能是我拥有的更简单组件的最佳解决方案，我认为它会起作用。另一个问题是，在某些情况下，我期望 const validation 将是一个数组，并且一些子组件会将验证推送到该数组。当我单击提交时，所有验证都必须运行。也许在这种情况下我需要使用useEffect