React - 无法获取图片高度/宽度的实际值

Question

我正在按照 Udemy 课程制作 Face Recognition React Web 应用程序，但是课程材料已经过时，所以我决定将控制权交到我手中并使用钩子和上下文 API 重新构建它。

问题 - 我无法获取上传（获取）图像的实际高度和宽度。尝试了许多不同的方法，但无法使其工作。 有时，当图片上传时，我没有得到任何返回它的宽度和高度，有时值没有在“useState”中更新。我需要这些值是正确的，以便将来进行计算以从图像中检测人脸。

这里发生的事情的简要概述。 “useEffect”用于立即设置“img”状态及其当前的高度和宽度属性 => 在 JSX 部分中，“”源是从我的上下文 API 中获取的，而该 API 是从“ImageLinkForm”组件中获取的。

const ImageField = () => {

const faceContext = useContext(FaceContext);

const ref = useRef();
const [img, setImg] = useState({
    height: '',
    width: ''
  });

  useEffect(() => {
    setImg({ ...img, height: ref.current.clientHeight, width: ref.current.clientWidth })
    console.log(`This is height ${img.height}`);
    console.log(`This is width ${img.width}`);
  }, [faceContext]);

  return (
    <div className="p-3">
      <div className="fieldImg">
        <img src={faceContext.fieldUrl} class="img-fluid rounded-lg" id="inputImage" ref={ref} alt="Responsive image" />
        <div><h4 className="text-primary">HEADER {img.height}</h4></div>
      </div>
    </div>
  )
}

纸上的这个问题看起来很简单，但我已经坚持了好几个星期了。 如果有人愿意从这里看看这里的 github repo - https://github.com/Fruscoqq/FaceRecognition

任何帮助将不胜感激。

Answer 1

您可以删除整个hook，如下所示，前提是您遇到过它无法正常工作。

useEffect(() => {
  setImg({ ...img, height: ref.current.clientHeight, width: ref.current.clientWidth })
  console.log(`This is height ${img.height}`);
  console.log(`This is width ${img.width}`);
}, [faceContext]);

不要像ref={ref}那样传递ref变量，而是传递ref回调函数。

ref={onRefChange}

在 func 内部，您可以在 DOM 元素更改时更新 img 状态。

const onRefChange = useCallback(node => {
  // ref value changed to node
  if (node !== null && node.clientHeight !== null && node.clientWidth !== null) {
    setImg({ ...img, height: node.clientHeight, width: node.clientWidth })
  }
}, [img]);

我们之所以使用calback refs，是因为 React 建议使用它来检测 ref 值的变化。