如何打印 Clarifai API 返回的响应？

Question

帮助...我正在制作一个使用 Clarifai API 食物模型检测食物成分的项目。当 API 扫描图像时，它 returns 通过 console.log 响应。您如何从 API (console.log) 获得输出并将其打印在网页中。抱歉，这里是有抱负的网络开发新手。Image of website,console.log, and JS code

Answer 1

您应该在组件状态中定义一个键值对，而不是控制台记录响应：

// the initial value of each key in state should match what data you are storing
this.state = {
  input: '',
  foodUrl: '',
  prediction: {},
};

文件收到 API 响应后，您可以这样写：

而不是控制台记录响应

this.setState({ prediction: response.outputs[0].data.concepts[0] });

接下来，您将把它传递给您用来在 App.js 的渲染部分显示响应的组件：

<ComponentToRenderAPIResponse prediction={this.state.prediction} />

在该子组件中，您可以在渲染部分编写如下内容：

render() {
  return (
    <div>`Detected Food: ${prediction.name}`</div>
    <div>`Prediction Value: ${prediction.value}`</div>
  )
}

您可以只访问名称和值键值对并将它们作为单独的字段存储在您的状态对象中，而不是存储显示在控制台中的整个对象。然后将名称和值作为不同的道具传递给子组件。此外，您可能需要考虑与我上面使用的 div 不同的 html 标签，并向两个标签添加 CSS 样式。

如何打印 Clarifai API 返回的响应？

How to print Clarifai API returned response?

html

javascript

css

reactjs

clarifai