使用useEffect侦听状态更改

Question

我有以下Useffect钩子：

useEffect(() => {
    let canvas = document.getElementById('canvas');
    if (canvas && image.img) {
      let context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      //Redraw image
      context.drawImage(image.img, 0, 0, image.width, image.height);
      let scalePoint1 = retrievePointByName(drawnPoints, 'S1');
      let scalePoint2 = retrievePointByName(drawnPoints, 'S2');
      if (scalePoint1 && scalePoint2) {
        let scaleLine = new Line(scalePoint1, scalePoint2, null, 'ScalePoint');
        setScaleProperties({
          scaleDistance: scaleLine.length(), //What is the distance between the scale points (in pixels)
          scaleValueMm: scaleProperties.scaleValueMm, //How many mm-s does the specified distance corresponds to
          scaleFactor:
            scaleProperties.scaleDistance / scaleProperties.scaleValueMm, //scaleDistance/scaleValueMm. Gives the factor, how many pixels are equal to 1 mm.
        });
        scaleLine.draw();
      }
      drawnPoints.forEach((point) => {
        point.draw();
      });
      setDrawnLines([]);
      setWrongPointPlacement({
        lines: [],
      });
    }
  }, [drawnPoints]);

然而，我得到以下警告：

React Hook useEffect缺少依赖项：“image.height”、“image.img”、“image.width”、“scaleProperties.scaleInstance”和“scaleProperties.scaleValueMm”。请包含它们或删除依赖项数组

Image和scaleProperties也是组件的状态变量（使用useState定义）

我觉得我有可能滥用Useffect。我的想法是将其用作“drawnPoints”状态更改的侦听器，以便在更新或更改点时，我重新绘制画布。（并更新一些其他依赖状态）我正在做一些可视化任务。

如果我确实误用了这个概念，那么在react中实现这一点的“公认”或“最佳实践”方式是什么？

提前谢谢你！

Answer 1

useffect用法规则规定，无论何时使用在useffect挂钩之外定义的变量，都必须将其添加到依赖项数组，因为useffect依赖于它并监听它的更改，无论它们的值何时更改，都必须将其添加到依赖项数组中重新运行。

在您的案例中，让我们考虑这行代码：

  //Redraw image
  context.drawImage(image.img, 0, 0, image.width, image.height);

您收到此警告的原因是，在您正在重新绘制圆的那一行，您告诉useffect无论何时图像都要重新绘制图像。高度，图像。图像。宽度更改。正如我所说，这是因为image。高度，图像。图像。宽度在useffecthook之外定义。