reactjs - API 搜索 term 而不是 id

Question

我正在尝试使用 USDA FoodData API。我的代码目前通过输入食品的 FDCID 并在屏幕上显示食品中的蛋白质来工作。

我想做的是创建一个网络应用程序，用户可以在其中通过名称而不是 FDCID 搜索食物。

查看文档，我看不到用户按食物名称搜索的方法，但在他们的网站上，他们有一个搜索功能设置，以便您可以做到这一点。

我想知道是否可以设置一个函数来通过搜索食物名称然后将 ID 传递到搜索中来获取 FDCID。或者，如果有更好的方法来做到这一点。

这里也是文档的链接： https ://fdc.nal.usda.gov/api-guide.html

应用程序.js

import React from 'react';
import './App.css';
import axios from 'axios'
require('dotenv').config();




export default class App extends React.Component {
  state = {
    protein: ""
  }


  clickHandler = (event) => {
    if (event.keyCode === 13) {
      const query = event.target.value;
      const API_KEY = process.env.API_KEY
      axios.get(`https://api.nal.usda.gov/fdc/v1/food/${query}?api_key=${API_KEY}`)
        .then(res => {

          const protein = res['data']['foodNutrients']['0']['amount'];
          this.setState({ protein })
        })
    }
  }



  render() {
    return (
      <div>
        <h1>{this.state.protein}</h1>
        <input onKeyDown={event => this.clickHandler(event)} />
      </div>
    )
  }


}

标签： reactjsapi

Answer 1

您可以使用/search?api_key=KEY&query=QUERY端点。

招摇文档