Clarifai API 未检测到 React.js 中的图像 URL答案

【问题标题】：Clarifai API not detecting the image URL in React.jsClarifai API 未检测到 React.js 中的图像 URL
【发布时间】：2022-08-20 03:49:11
【问题描述】：

我正在使用 Clarifai API 人脸检测，它无法获取从构造函数提供的 URL，而不是 Clarifai 在默认代码中提供的变量

    class App extends Component{

  constructor(){
    super();
    this.state = {
      input : \'\',
      IMAGE_URL: \'\',
    }
  }
  onInputChange = (event) =>{
    this.setState({input: event.target.value});
  }

  onSubmit = () =>{
    this.setState({IMAGE_URL : this.state.input});
    const raw = JSON.stringify({
      \"user_app_id\": {
          \"user_id\": USER_ID,
          \"app_id\": APP_ID
      },
      \"inputs\": [
          {
              \"data\": {
                  \"image\": {
                      \"url\": this.state.IMAGE_URL
                  }
              }
          }
      ]
  });

  const requestOptions = {
      method: \'POST\',
      headers: {
          \'Accept\': \'application/json\',
          \'Authorization\': \'Key \' + PAT
      },
      body: raw
  };

  // NOTE: MODEL_VERSION_ID is optional, you can also call prediction with the MODEL_ID only
  // https://api.clarifai.com/v2/models/{YOUR_MODEL_ID}/outputs
  // this will default to the latest version_id

  fetch(\"https://api.clarifai.com/v2/models/\" + MODEL_ID + \"/versions/\" + MODEL_VERSION_ID + \"/outputs\", requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log(\'error\', error));
  }

当我在构造函数中添加 IMAGE_URL 以从网页上的输入表单更新它时，我开始面临这个问题。如果我将 IMAGE_URL 从构造函数中移出并使其成为变量并在编辑器中硬编码图像 url，它工作正常

编辑：这是经过一些调整后的代码。还是一样的错误

onInputChange = (event) =>{
    this.setState({input: event.target.value});
    console.log(typeof(input),\'TYPE OF INPUT\');
    var inp = this.state.input;
    return inp
     //console.log(inp);
     console.log(typeof(inp)); //it is string here
  }

  onSubmit = () =>{
    this.setState({IMAGE_URL : this.state.inp});
    
    const raw = JSON.stringify({
      \"user_app_id\": {
          \"user_id\": USER_ID,
          \"app_id\": APP_ID
      },
      \"inputs\": [
          {
              \"data\": {
                  \"image\": {
                      \"url\": this.state.IMAGE_URL
                  }
              }
          }
      ]

编辑2：它现在正在工作，我想我违反了一些规则。我已经声明了一个全局变量并将输入字段的值传递给它，然后在我的 API 中使用它。

var inp = \'\'; //THIS IS THE NEW VARIABLE
class App extends Component{

  constructor(){
    super();
    this.state = {
      input : \'\',
      IMAGE_URL: \'\',
    }
  }
  onInputChange = (event) =>{
    this.setState({input: event.target.value}); 
    
    
    
    inp = event.target.value;
    console.log(inp);
    return inp;
   
  }

  onSubmit = () =>{
    console.log(\'*********\',inp,\'***********\');
    this.setState({IMAGE_URL : this.state.input});
    
    const raw = JSON.stringify({
      \"user_app_id\": {
          \"user_id\": USER_ID,
          \"app_id\": APP_ID
      },
      \"inputs\": [
          {
              \"data\": {
                  \"image\": {
                      \"url\": inp
                  }
              }
          }
      ]

当您使用硬编码与动态时，您可以对raw 变量进行console.log 吗？我唯一看到的是类型可能不一样（即字符串）并且它导致raw 字符串编码为不同的东西。
@syntheticgio 具有动态输入的原始变量 {\"user_app_id\":{\"user_id\":\"kkf1d032jwpm\",\"app_id\":\"my-first-application\"},\"inputs\": [{\"数据\":{\"图像\":{}}}]}
具有硬编码输入的原始变量 {\"user_app_id\":{\"user_id\":\"kkf1d032jwpm\",\"app_id\":\"my-first-application\"},\"inputs\":[ {\"数据\":{\"图片\":{\"url\":\"i0.wp.com/post.medicalnewstoday.com/wp-content/uploads/sites/3/…\"}}}]}
@syntheticgio 你是对的。我 console.log typeof IMAGE_URL 是动态的，它是未定义的，我设法通过将它存储在另一个变量中将它转换为字符串。但是，当我将它用作 API 中的 url 时，它似乎就消失了。我完全迷失了
添加了一条我认为可以解释正在发生的事情的评论；很抱歉延迟回复:)

标签： javascript reactjs rest clarifai

【解决方案1】：

似乎您找到了使用全局变量的解决方法；但我认为实际问题在于：

this.setState({IMAGE_URL : this.state.input});

在onSubmit 函数中。

react中的setState函数：

将 setState() 视为更新组件的请求而不是立即命令。为了更好地感知性能，React 可能会延迟它，然后一次更新多个组件。

https://reactjs.org/docs/react-component.html#setstate

我认为以下代码应该可以工作，并允许您远离全局范围（如果这让您感到困扰）。

class App extends Component{

  constructor(){
    super();
    this.state = {
      input : '',
      IMAGE_URL: '',
    }
  }
  onInputChange = (event) =>{
    this.setState({input: event.target.value});
  }

  onSubmit = () =>{

    // This may not trigger right away, but if you want to transfer the this.state.input to this.state.IMAGE_URL it _eventually_ will
    this.setState({IMAGE_URL : this.state.input});

    const raw = JSON.stringify({
      "user_app_id": {
          "user_id": USER_ID,
          "app_id": APP_ID
      },
      "inputs": [
          {
              "data": {
                  "image": {
                      "url": this.state.input
                  }
              }
          }
      ]
  });

  const requestOptions = {
      method: 'POST',
      headers: {
          'Accept': 'application/json',
          'Authorization': 'Key ' + PAT
      },
      body: raw
  };

  // NOTE: MODEL_VERSION_ID is optional, you can also call prediction with the MODEL_ID only
  // https://api.clarifai.com/v2/models/{YOUR_MODEL_ID}/outputs
  // this will default to the latest version_id

  fetch("https://api.clarifai.com/v2/models/" + MODEL_ID + "/versions/" + MODEL_VERSION_ID + "/outputs", requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));
  }

【讨论】：