无法读取 null 的属性 'getData'，当保持纵横比处于状态时

Question

我尝试在 cropper 中设置最小数据维度，它仅在纵横比被硬编码时有效，但如果我保持纵横比处于状态，cropper 会抛出错误：

Cannot read property 'getData' of null.

如何解决？我会感谢每一个建议。这是我的简单代码：

import React, {
  useState,
  useRef,
  useCallback
} from "react";
import ReactDOM from "react-dom";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo = props => {
  let cropper = useRef(null);
  const [aspectWidth, setaspectWidth] = useState(1);
  const [aspectHeight, setaspectHeigh] = useState(1);

  const setHeight = useCallback(event => {
    setaspectHeigh(parseInt(event.currentTarget.value));
  }, []);

  const setWidth = useCallback(event => {
    setaspectWidth(parseInt(event.currentTarget.value));
  }, []);

  const showData = useCallback(() => {
    const data = cropper.getData();
    if (data.width < 100) {
      data.width = 100;
      cropper.setData(data);
    }
    if (data.height < 100) {
      data.height = 100;
      cropper.setData(data);
    }
  }, []);
  return (
    <div>
      <Cropper
        autoCrop={true}
        cropmove={showData}
        scalable={true}
        src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg? 
        auto=compress&cs=tinysrgb&dpr=1&w=500"
        style={{ width: "520px", height: "520px" }}
        aspectRatio={aspectWidth / aspectHeight}
        ref={el => {
          cropper = el;
        }}
        autoCropArea={1}
        viewMode={3}
      />
      <div className="crop-right-size">
        <div className="crop-right-width">
          <p>Width</p>
          <input type="text" onChange={setWidth} value={aspectWidth} />
        </div>
        <div className="crop-right-height">
          <p>Height</p>
          <input type="text" onChange={setHeight} value={aspectHeight} />
        </div>
      </div>
    </div>
  );
};
export default Demo;

Answer 1

试试这个：

import React, {


useState,
  useRef,
  useCallback
} from "react";
import ReactDOM from "react-dom";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo = props => {
  let cropper = useRef(null);
  const [aspectWidth, setaspectWidth] = useState(1);
  const [aspectHeight, setaspectHeigh] = useState(1);

  const setHeight = useCallback(event => {
    setaspectHeigh(parseInt(event.currentTarget.value));
  }, []);

  const setWidth = useCallback(event => {
    setaspectWidth(parseInt(event.currentTarget.value));
  }, []);

  const showData = useCallback(() => {
    const data = cropper.current.getData();
    if (data.width < 100) {
      data.width = 100;
      cropper.setData(data);
    }
    if (data.height < 100) {
      data.height = 100;
      cropper.current.setData(data);
    }
  }, []);
  return (
    <div>
      <Cropper
        autoCrop={true}
        cropmove={showData}
        scalable={true}
        src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg? 
        auto=compress&cs=tinysrgb&dpr=1&w=500"
        style={{ width: "520px", height: "520px" }}
        aspectRatio={aspectWidth / aspectHeight}
        ref={cropper}
        autoCropArea={1}
        viewMode={3}
      />
      <div className="crop-right-size">
        <div className="crop-right-width">
          <p>Width</p>
          <input type="text" onChange={setWidth} value={aspectWidth} />
        </div>
        <div className="crop-right-height">
          <p>Height</p>
          <input type="text" onChange={setHeight} value={aspectHeight} />
        </div>
      </div>
    </div>
  );
};
export default Demo;

无法读取 null 的属性 'getData'，当保持纵横比处于状态时

Cannot read property 'getData' of null, when keep aspectratio in state

javascript

reactjs

cropperjs

react-hooks

无法读取 null 的 属性 'getData'，当保持纵横比处于状态时

Cannot read property 'getData' of null, when keep aspectratio in state

javascript

reactjs

cropperjs

react-hooks

无法读取 null 的属性 'getData'，当保持纵横比处于状态时