无法读取null的属性

Question

我试图为图像浏览获得以下代码，然后剪切已浏览的图像：

这是应该使用的代码：

import "./styles.css";
import React, { useState } from "react";
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css'


export default function App() {
  const [src, selectFile] = useState(null);

  const onImageChange = (event) => {
    selectFile(URL.createObjectURL(event.target.files[0]));
  };

  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });
  const [result, setResult] = useState(null);
  function getCroppedImg(){
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage
    (
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height,
    );
    
    const base64Image = canvas.toDataURL('image/jpeg');
    setResult(base64Image)

  }



  return (
    <div className="container">
      <div className='row'>
    <div className='col-6'>
    <input type="file" accept ='image/*' onChange={onImageChange}/>
</div>
{src && <div className='col-6'>
<ReactCrop src={src} onImageLoaded={setImage} crop={crop} onChange={setCrop} />
<button className='btn btn-danger' onClick={getCroppedImg} > Crop Image </button>
  </div>}
  {result && <div className='col-6'> <img src={result} alt='Cropped Image' className='img-fluid' /> 
  </div>}
  </div>
</div>
  );
}

您可以使用此沙箱链接立即测试和调试代码，并查看错误，沙箱中的代码测试。

这个完整的代码不是我的，我一直在youtube上关注这个教程，因为我试图让它在我的主要项目中学习和使用，但是我不能让它像在那里那样工作--这个错误实际上并不在教程中，因为我甚至没有遗漏任何代码，所以我无法理解为什么会发生这个错误，让我理解为什么会发生这个错误。这是yt链接：yt教程代码

另外，当我试图浏览当前代码中的图像时，它无法工作，因此我实际上试图通过添加以下行来修复它

<img src={src} />

在它下，它实际上开始工作，以显示图像，但裁剪功能不起作用。

Answer 1

您所看到的错误可能与代码如何使用React的useState钩子有关。

在React中，钩子是一种特殊的函数，它允许您从功能组件中“钩子”进入功能。useState钩子是向功能组件添加状态的一种方法。它接受状态的初始值，并返回一个包含两个项的数组:当前状态值和更新状态的函数。

在您发布的代码中，useState用于创建两个状态变量: src和image。下面是代码如何设置这些状态变量的初始值：

const [src, selectFile] = useState(null);
const [image, setImage] = useState(null);

第一个useState调用设置初始值为null的src，第二个useState调用设置初始值为null的image。

您所看到的错误可能与代码中如何使用这些状态变量有关。例如，当用户选择一个文件时，代码试图设置src状态变量：

const onImageChange = (event) => {
  selectFile(URL.createObjectURL(event.target.files[0]));
};

在这里，onImageChange函数被传递给<input type="file">元素的onChange属性。当用户选择一个文件时，将调用onImageChange函数，该函数使用src调用返回的selectFile函数更新useState状态变量。

您所看到的错误可能与代码中如何使用src状态变量有关。例如，代码使用src状态变量设置<img>元素的src属性：

{src && <img src={src} />}

此代码使用“短路”运算符(&&)只在<img>是真实的(即不是null或undefined)的情况下呈现src元素。如果src是null或undefined，则不会呈现<img>元素。

如果您看到的错误与src状态变量相关，可能是因为src状态变量没有被正确初始化，或者因为src状态变量在代码中的某个点被设置为null或undefined。

我建议仔细检查代码，并确保src状态变量是用非空值初始化的，并且在代码中的任何一点上都没有将其设置为null或undefined。您还可能希望查看React文档，以获得有关使用useState钩子的更多信息。

Answer 2

您所看到的错误是，当您试图访问null函数中的属性时，图像是getCroppedImg。这是因为在调用onImageLoaded组件的ReactCrop支柱之前不会设置映像状态，只有在加载映像时才会发生这种情况。但是，在加载映像之前会调用getCroppedImg函数，因此此时图像仍然是null。

解决这一问题的一种方法是在尝试访问getCroppedImg函数中的属性之前检查图像是否为null。您可以通过添加如下条件语句来完成此任务：

function getCroppedImg(){
  if (image) {
    // rest of the code
  }
}

或者，您可以将延迟调用getCroppedImg函数，直到加载图像之后。为此，可以将回调函数传递给ReactCrop组件的ReactCrop支柱，并从回调内部调用getCroppedImg函数。这样，在设置了图像状态之后，将调用getCroppedImg函数，因此此时它不会为null。

下面是一个如何做到这一点的例子：

function App() {
  const [src, selectFile] = useState(null);

  const onImageChange = (event) => {
    selectFile(URL.createObjectURL(event.target.files[0]));
  };

  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });
  const [result, setResult] = useState(null);

  function getCroppedImg(){
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage
    (
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height,
    );
    
    const base64Image = canvas.toDataURL('image/jpeg');
    setResult(base64Image)
  }

  return (
    <div className="container">
      <div className='row'>
    <div className='col-6'>
    <input type="file" accept ='image/*' onChange={onImageChange}/>
</div>
{src && <div className='col-6'>
<ReactCrop
  src={src}
  onImageLoaded={setImage}
  crop={crop}
  onChange={setCrop}
  onImageLoaded={() => getCroppedImg()}
/>
<button className='btn btn-danger' onClick={getCroppedImg} > Crop Image </button>
  </div>}

Answer 3

我设法通过在反应作物部分中添加以下部分来解决这个错误：

   <div>
   {srcImg && (
     <div>
       <ReactCrop
           style={{ maxWidth: "50%", maxHeight: "50%" }}
                  crop={crop}
                   onChange={setCrop}
                 >
                  <img
                    src={srcImg}
                     onLoad={onLoad}
                  /></ReactCrop>

似乎在对裁剪图像的反应上，onimageloaded函数不再起作用了，这就是为什么我以前无法让它工作，并且图像是空的，因此我使用了onLoad来使裁剪函数再次工作。