Reactjs API搜索术语而不是id

我正在尝试使用美国农业部食品数据API。我的代码目前通过键入食品的FDCID来工作，并在屏幕上显示食品中的蛋白质

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

通过查看文档，我看不到用户通过食物名称进行搜索的方法，但是在他们的网站上，他们有一个搜索功能设置，这样你就可以做到这一点

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

以下是指向文档的链接：

App.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>
    )
  }


}

从“React”导入React；
导入“/App.css”；
从“axios”导入axios
require（'dotenv'）.config（）；
导出默认类App扩展React.Component{
状态={
蛋白质：“
}
clickHandler=（事件）=>{
如果（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}`）
。然后（res=>{
常量蛋白质=res['data']['foodNutrients']['0']['amount']；
this.setState（{protein}）
})
}
}
render（）{
返回(
{this.state.protein}
this.clickHandler（事件）}/>
)
}
}

您可以使用端点

您可以使用端点

---

这个端点对您有用吗：？是的，这正是我要找的，我没有看到这个，谢谢！这个端点对你有用吗：？是的，这正是我想要的，我没有看到这个，谢谢！