React首次渲染Azure OCR API调用失败，仅手动重渲染后成功

问题说明 #

在React应用中调用Azure光学字符识别（OCR）API时，首次渲染阶段POST和GET请求均失败，仅在开发环境手动触发重渲染（如Ctrl+S）后才能成功。首次渲染时operation-location值为null，导致GET请求错误指向http://localhost:5173/null，进而触发报错：TypeError: Cannot read properties of undefined (reading 'analyzeResult')。

请求逻辑 #

• OCR API调用需两步：先发起POST请求，从响应头获取operation-location；再用该值发起GET请求，传入图片URL提取纯文本。
• Api.jsx组件通过useEffect监听来自Homepage.jsx的props参数UserUrl（用户输入的图片URL），触发请求流程。

已尝试但无效的方法 #

• 将POST请求URL迁移至.env环境变量
• 对GET请求进行异步处理
• 配置CORS相关设置
• 通过loading状态触发组件重渲染

最终解决方案 #

1. 将operation-location改为非状态变量 #

不要用React状态存储operation-location，而是在请求函数内部直接赋值，避免状态更新的异步性导致的取值延迟。

2. 用setTimeout延迟GET请求 #

Azure OCR的POST请求提交后，需要一定时间完成图片识别，直接紧接着发起GET请求会因识别未完成返回无效结果，通过延迟GET请求确保识别流程完成。

示例代码 #

import { useEffect } from 'react';

const Api = ({ UserUrl }) => {
  const fetchData = async () => {
    if (!UserUrl) return;

    // 发起POST请求获取operation-location
    const postOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Ocp-Apim-Subscription-Key': process.env.REACT_APP_AZURE_OCR_KEY
      },
      body: JSON.stringify({ url: UserUrl })
    };

    const postResponse = await fetch(process.env.REACT_APP_AZURE_OCR_POST_URL, postOptions);
    // 直接赋值给非状态变量
    const operationLocation = postResponse.headers.get('operation-location');

    if (!operationLocation) return;

    // 延迟发起GET请求，确保OCR识别完成
    setTimeout(async () => {
      const getOptions = {
        method: 'GET',
        headers: {
          'Ocp-Apim-Subscription-Key': process.env.REACT_APP_AZURE_OCR_KEY
        }
      };

      const getResponse = await fetch(operationLocation, getOptions);
      const result = await getResponse.json();

      if (result.analyzeResult) {
        // 处理提取到的文本
        console.log(result.analyzeResult.readResults[0].content);
      }
    }, 3000); // 根据实际情况调整延迟时间，一般2-5秒足够
  };

  useEffect(() => {
    fetchData();
  }, [UserUrl]);

  return <div>OCR识别中...</div>;
};

export default Api;

内容的提问来源于stack exchange，提问作者Nick Marie