Реагировать нативно извлеченный ответ API, не отображающий ⇐ Javascript

[Anonymous]

У меня есть приложение React, которое делает запрос POST в Backend API для обработки изображения. Бэкэнд правильно обрабатывает запрос и возвращает ожидаемый ответ. Однако пользовательский интерфейс неправильно отображает выход. >
import React, { useState } from "react";
import axios from "axios";
import { useDropzone } from "react-dropzone";

interface ExtractedData {
company: string;
invoice_date: string;
items: { description: string; quantity: number; amount: string }[]; // Changed amount to string for "$745.00" format
total_amount: string;
practitioner: string;
patient: string;
location: string;
currency: string | null;
other_details?: string;
}

const ImageUploadOCR: React.FC = () => {
const [image, setImage] = useState(null);
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);

const { getRootProps, getInputProps } = useDropzone({
accept: { "image/*": [] },
onDrop: (acceptedFiles) => setImage(acceptedFiles[0]),
});

const handleUpload = async () => {
if (!image) return;

setLoading(true);
const formData = new FormData();
formData.append("image", image);

try {
console.log("Data disk reached");
const response = await axios.post("http://localhost:5000/api/extract", formData, {
headers: { "Content-Type": "multipart/form-data" },
});

// Log the full response to verify the structure
console.log("Response data:", response.data);

// Set data to the state
setData(response.data);

// Optionally log company and invoice_date for debugging
console.log("Company:", response.data?.company);
console.log("Invoice Date:", response.data?.invoice_date);
} catch (error) {
console.error("Error uploading image:", error);
} finally {
setLoading(false);
}
};

return (



{image ?


:
Drag & drop an image, or click to select
}


{loading ? "Processing..." : "Upload & Extract"}


{data && (

Extracted Data



Field
Value




Company
{data?.company || "Not available"} {/* Optional chaining added */}


Invoice Date
{data?.invoice_date || "Not available"} {/* Optional chaining added */}




Items



Description
Quantity
Amount



{data.items.map((item, index) => (

{item.description}
{item.quantity}
{item.amount}

))}



)}

);
};

export default ImageUploadOCR;
< /code>
проблема: < /strong>
API возвращает ожидаемый результат, но пользовательский интерфейс не отображает изображение.
Нет ошибок в Консоль. < /p>
ответный ответ: < /p>
{'Currency': None, 'Location': {'Patient Address': '11 Rosewood Drive, Collingwood, NY 33580', 'Physician Address': '102 Trope Street, New York, NY 45568'}, 'Other relevant details': {'Due Date': '07/30/23', 'Invoice Number': '12245', 'Note': 'A prescription has been written out for patient, for an acute throat infection.', 'Sub Total': '$745.00', 'Tax': '$157.05', 'Tax Rate': '9%'}, 'Patient': 'Kemba Harris', 'Practitioner': 'Dr. Alanah Gomez', 'Total Amount': '$1,902.05', 'company': 'Not Specified', 'invoice_date': '07/01/23', 'items': [{'Amount': '$745.00', 'Description': 'Full body check up', 'Item': 'Full Check Up', 'Quantity': 1}, {'Amount': '$1,000.00', 'Description': 'Infection check due to inflammation', 'Item': 'Ear & Throat Examination', 'Quantity': 1}]}
< /code>
Как я могу правильно отобразить выход изображения в пользовательском интерфейсе? Что может вызвать проблему?>

Подробнее здесь: https://stackoverflow.com/questions/794 ... displaying