Question

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

问题1：

在使用react的useEffect和useCallback函数时，我遇到了一些问题。以前，在我添加useEffect之前，handleClear函数可以正常工作。但是，在添加useEffect之后，sigPad引用始终在handleClear中返回null。

我不确定我的思维模式是否正确，有人可以解释为什么会这样吗？

问题2：

但是我意识到，在[sigPad]处删除了handleClear之后，我可以再次收到引用。我的代码的哪一部分重新呈现，以及useCallback如何无法意识到sigPad从null更改为正确的引用？

问题代码：

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]

Answer 1

挂钩按调用顺序执行，这意味着useEffect优先于useCallback函数。同样，此[]称为依赖项数组，用于创建基础结构的新实例。使用useRef时，您无需这样做

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

你可以做

ref={sigPad}

并尝试将useCallback移到useEffect上方。

同时反应useCallback和useEffect弄乱了状态

1 个答案: