400 错误请求 API 使用 Clarifai 的 API 和 react 的 useState 和 useEffect 时调用

Question

尝试通过 react-dropzone 使用 clarifai 的 Api 构建一个识别图像中的面部和对象的应用程序，这是我安装的拖放 package。 当我使用 static 图像时，我从 Clarifai 得到了没有任何错误的响应，但是当我尝试从我的 state 加载它时，我不断收到 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;

Answer 1

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