React useCallback 和 useEffect 同时搞乱了状态答案

【问题标题】：React useCallback and useEffect at the same time messed the stateReact useCallback 和 useEffect 同时搞乱了状态
【发布时间】：2020-05-14 09:28:58
【问题描述】：

我为我的应用程序创建了一个SignaturePad，稍后会将值传递给 Formik。

问题一：

我在使用 react 的 useEffect 和 useCallback 函数时遇到了一些问题。在我添加 useEffect 之前，handleClear 函数工作得很好。然而，在我添加 useEffect 之后，sigPad refs 总是在 handleClear 中返回 null。

我不确定我的心智模型是否正确，谁能解释一下为什么会这样？

问题 2：

然而，我意识到，在删除 handleClear 处的 [sigPad] 后，我能够再次收到裁判。我的代码的哪一部分重新渲染，useCallback 如何没有意识到 sigPad 正在从 null 更改为正确的 ref？

有问题的代码：

export function Signature() {
  let sigPad = useRef(null);
  const [sig, setSig] = useState("");
  const classes = formStyles();

  useEffect(() => {
    console.log(sigPad);
    setSig(sigPad.toData());
    console.log(sigPad);
  }, [sig]);
  const handleClear = useCallback(() => {
    console.log(sigPad);
    if (sigPad) sigPad.clear();
  }, [sigPad]);

  return (
    <div className="row">
      <Grid spacing={3} container>
        <Grid item xs={12}>
          <h3 className="text-bold">Signature</h3>
        </Grid>
        <Grid item xs={12}>
          <div className="sigCanvas">
            <SignatureCanvas
              penColor="black"
              canvasProps={{ className: "sigPad" }}
              ref={ref => {
                sigPad = ref;
              }}
            />
          </div>
        </Grid>
        <Grid item xs={3}>
          <Button
            variant="contained"
            component="label"
            className={classes.instructions}
            onClick={handleClear}
          >
            Clear
          </Button>
        </Grid>
        <Grid item xs={3}>
          <Button
            component="label"
            variant="contained"
            className={classes.instructions}
          >
            Save
          </Button>
        </Grid>
      </Grid>
    </div>
  );
}

当前修复：

  const handleClear = useCallback(() => {
    console.log(sigPad);
    if (sigPad) sigPad.clear();
  });

注意：在我添加 useEffect 之前，我不必在回调中删除 [sigPad]

【问题讨论】：

标签： reactjs

【解决方案1】：

钩子按照它们被调用的顺序执行，这意味着你的useEffect 优先于你的useCallback 函数。此外，这个[] 称为依赖数组，用于创建底层结构的新实例。使用useRef 时不需要这样做

ref={ref => { sigPad = ref; }}

你可以这样做

ref={sigPad}

并尝试将您的useCallback 移动到useEffect 上方。

【讨论】：