将Clarifai的API与react的useState和useEffect

问题描述

尝试通过clarifai的Api通过react-dropzone构建一个可识别图像中的面部和物体的应用程序，这是我安装的拖放程序包。当我使用静态图片时，我会收到Clarifai的回应，没有任何错误，但是当我尝试从我的状态加载它时，我总是收到400错误的请求。

我认为该错误可能与useState的工作方式有关。

请问有人可以帮忙吗？

请参见下面的代码。

import React,{ useState,useEffect} from 'react';

import Clarifai from 'clarifai';
import Dropzone from 'react-dropzone';

import Header from './components/header/header.component.jsx';
import Modal from './components/modal/modal.component';
import Box from './components/box/box.component';
import './App.css';


    const app = new Clarifai.App({
        apiKey: 'REDACTED'
    
    });

const App = () => {

    const [fileProperties,setFileProperties] = useState([]);
    const [isModalOpen,setModal] = useState(false);

    const handleDrop = acceptedFiles => {
        setFileProperties(acceptedFiles.map(file => URL.createObjectURL(file)));
        toggleModal()
    }
    useEffect(() => {
        if(fileProperties.length > 0){
            console.log(fileProperties);
            app.models.predict(Clarifai.FACE_DETECT_MODEL,fileProperties).then(
            function(response) {
                console.log(response);
            },function(err) {
                console.log('There was an error',err);
            }
                );          
        }
    },[fileProperties]);

        

    const toggleModal = () => {
        setModal(!isModalOpen);
    }
    return (
        <div className="main">  
            <Header/>   
            { isModalOpen && 
                <Modal>
                    <Box isModalOpen={isModalOpen} fileProperties={fileProperties} toggleModal={toggleModal}/>
                </Modal>
            }   
            <Dropzone  onDrop={handleDrop} accept="image/*">
                {({ getRootProps,getInputProps,isDragActive,isDragAccept,isDragReject}) => {
                  // additional CSS depends on dragging status
                  const additionalClass = isDragAccept ? "accept" : isDragReject ? "reject" : "";
                  return (
                    <div{...getRootProps({className: `dropzone ${additionalClass}` })} >
                          <input {...getInputProps()} />
                          <h2>This smart box detects faces & objects like sunglasses and hats in an image</h2>
                          <span>{isDragActive ? "?" : "?"}</span>
                          <p>Drag and drop an image,or click to select </p>
                    </div>
                  );
               }}
            </Dropzone>
        </div>
    );  
}

export default App;

解决方法

URL.createObjectURL返回DOMString，您需要发送base64字符串或Clarifai可以访问的url。 https://docs.clarifai.com/api-guide/predict/images