SearchBar 中的数据库 API

Question

        <SearchBar/>
            <List style={{ paddingTop: hp("1%"), backgroundColor: "white" }}>
              <TouchableOpacity>
                <Text>Foods</Text>
              </TouchableOpacity>
            </List>

大家好，我无法弄清楚以下内容：我正在尝试通过 SearchBar 从数据库 Edamam API 中搜索食物并将它们列在 List 中，这是页面的 link：https://developer.edamam.com/food-database-api-docs 我该怎么做？

Answer 1

这是一个按成分搜索的例子：

export default function App() {
  const [data, setData] = useState([]);

  const updateSearch = (e) => {
    axios
      .get(
        `https://api.edamam.com/api/food-database/v2/nutrients?app_id=${YOUR_APP_ID}&app_key=${YOUR_APP_KEY}&ingr=${e.target.value}`
      )
      .then((res) => {
        setData(res.data);
      });
  };

  return (
    <div className="App">
      <SearchBar onChange={updateSearch}>
        <List style={{ paddingTop: hp("1%"), backgroundColor: "white" }}>
          <TouchableOpacity>
            <Text>
              {data.parsed.map(({ food }) => (
                <p>{food.label}</p>
              ))}
            </Text>
          </TouchableOpacity>
        </List>
      </SearchBar>
    </div>
  );
}

SearchBar 中的数据库 API

Database API in SearchBar

javascript

reactjs

react-native

edamam-api