Next.js中OCR API返回数据无法在页面展示问题求助

你的代码存在几个核心问题，导致OCR数据无法更新到页面：

错误点拆解 #

1. 异步函数处理错误：onCrop是异步函数，直接调用会返回Promise，而非同步返回数据。你注释的useEffect里直接解构{data}的写法完全错误，无法获取异步结果。
2. 返回值无意义：onCrop返回{props: {ocrData}}的结构对React组件没有作用，组件不会自动通过这个返回值更新状态或props。
3. 状态更新逻辑断裂：没有将onCrop获取到的数据与组件状态setOcrData关联起来，也缺少触发onCrop的用户交互逻辑。
4. 状态命名混淆：getOcrData作为状态变量名不合理，容易和函数名混淆，建议使用更清晰的命名。

修复后的代码 #

第一步：修改onCrop函数，直接返回OCR结果 #

const onCrop = async () => {
    const cropper = cropperRef.current;
    if (!cropper) return null; // 提前返回，减少嵌套层级
    
    const canvas = cropper.getCanvas();
    if (!canvas) return null;
    
    const img_data = canvas.toDataURL("image/jpg");
    
    const response = await fetch("/api/ocr", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ file: img_data }),
    });
     
    const data = await response.json();
    const ocrData = data.fullTextAnnotation.text;
    console.log(ocrData);
    return ocrData; // 直接返回识别到的文本内容
};

第二步：更新组件，关联状态与OCR触发逻辑 #

const Guestbook = ({ fallback }) => {
  // 初始化状态为空字符串，无需从props接收ocrData（除非父组件需传递初始值）
  const [ocrData, setOcrData] = useState("");

  // 定义触发OCR并更新状态的函数
  const handleCropAndOcr = async () => {
    const result = await onCrop();
    if (result) {
      setOcrData(result);
    }
  };

  return (
    <SWRConfig value={{ fallback }}>
      <main className="max-w-4xl mx-auto p-4">
        <AppHead />
          
        <div className="flex flex-row content-center">
            <div className="basis-1/2">
              {/* 假设Example是裁剪组件，通过props传递回调触发OCR */}
              <Example onCropComplete={handleCropAndOcr} />
              {/* 或者直接添加触发按钮：<button onClick={handleCropAndOcr}>执行OCR识别</button> */}
            </div>
            <div className="basis-1/2">
              <p>OCR Data</p>
              <p>{ocrData}</p>
            </div>
          </div>
        
      </main>
    </SWRConfig>
  );
};

关键说明 #

• 确保Example组件能在裁剪完成时调用handleCropAndOcr（比如通过按钮点击、裁剪结束事件），这样才能触发OCR请求并更新状态。
• 状态更新后，React会自动重新渲染组件，将ocrData的值展示在页面上。

内容的提问来源于stack exchange，提问作者Sahil Popli