Cropping functionality(react-easy-crop) is not working when i try to upload an image I am unable to edit or resize the image adjustment

问题

i had tried to implement to upload the multiple images but when i upload an image the image get randomly uploaded without cropping .so i had implemented react-easy-crop so when i tried to open the image cropping part is not opening i have tried the state method to open image but i am not understanding where i am getting wrong . i had implement image cropping before uploading an image . using react-easy-crop but its directly uploading the image without cropping below is the sandbox and code.

https://codesandbox.io/s/strange-chaplygin-i9pk5

const ImageDropzone = (props) => {
  const classes = useStyles();
  const { imageIndex, image, onDelete, onDrop, totalImages } = props;
  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: "image/jpeg,image/png,",
    maxSize: MAX_IMAGE_SIZE,
    multiple: true,
  });
  //   const isactive = totalImages === imageIndex;

  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels);
  }, []);
  const [aspectRatio, setAspectRatio] = useState(4 / 3);
  const [isCropping, setIsCropping] = useState(false);
  const [currentPic, setCurrentPic] = useState("");
  


  useEffect(() => {
    if (currentPic === "") {
      if (image) {
        setCurrentPic(window.URL.createObjectURL(image));
        setIsCropping(true);
      }
    }
  });

  return (
    <Paper
      className={image ? classes.ImageView : classes.ImageUploader}
      variant="outlined"
      {...getRootProps()}
    >
      {state.isactive && ( 
        <Cropper
          image={currentPic}
          crop={crop}
          zoom={zoom}
          aspect={aspectRatio}
          onCropChange={setCrop}
          onCropComplete={onCropComplete}
          onZoomChange={setZoom}
        />
      )}

      {image === null && (
        <>
          <input {...getInputProps()} />
          <AddCircleOutlineIcon
            fontSize="large"
            color="primary"
            style={{ color: isactive && ACTIVE_COLOR }}
          />
        </>
      )}
      {isactive && (
        <Typography variant="h4" className={classes.ActiveText}>
          Upload an Image
        </Typography>
      )}
      {image && (
        <>
          <ClearIcon
            className={classes.CancelIcon}
            onClick={() => onDelete(imageIndex)}
          />
          <img
            className={classes.ImageItem}
            src={image}
            alt={`Store Primary ${imageIndex + 1}`}
          />
        </>
      )}
    </Paper>
  );
};
export default ImageDropzone;

I am trying like the below image functionality image

Below is the reference example for similar design https://codesandbox.io/s/h874z

Tried to fix the issue in various methods and ways but it's not fixing. I am not able to know why it's getting an error I don't understand the exact issue in the code. Could anyone help with the solution?

来源：https://stackoverflow.com/questions/66131925/cropping-functionalityreact-easy-crop-is-not-working-when-i-try-to-upload-an-i