0

帮助... 我正在制作一个使用 Clarifai API 食品模型检测食品成分的项目。当 API 扫描图像时，它会通过 console.log 返回响应。您如何从 API (console.log) 获取该输出并将其打印在网页中。抱歉，这里是有抱负的新手网络开发人员。网站图片、console.log 和 JS 代码

4

1 回答 1

0

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

// 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 样式。

于 2020-09-01T04:29:54.413 回答