Reactjs 如何在React按钮中显示来自API的数据

我试图显示来自每个API调用的数据数组。假设我有一个/水果API和/披萨API。我希望以表格式显示，该格式由json数组中的每个元素分隔。如果API代码按预期工作，我将如何在react中执行此操作：

function getFood() {
    const fruitResult = API.get("fruits", "/fruits", params, {
    });
    const pizzaResult = API.get('pizza", "/pizza", params, {

  });
}

比如说，json是：

data: {
  "food": [
    "fruits": [{
       "name":"apple",
       "price":"2.5",
       "weight":"1"
     },
      ...
     ] 
  ]

}

理想情况下，我希望价格/重量是可点击的按钮，其外观如下：

---

因为您没有显示组件的外观。。我将从头开始为您创建一个功能组件

import React, { useEffect, useState } from 'react';
function CustomComponent() {
  const [fruits, setFruits] = useState([]);
  const [pizza, setPizzas] = useState([]);
  useEffect(() => {
    function getOdds() {
      const fruitResult = API.get("fruits", "/fruits", params, {
      });
      const pizzaResult = API.get("pizza", "/pizza", params, {
      });
      return Promise.all([fruitResult, pizzaResult])
    }
    getOdds().then(([fruitsRes, pizzasRes]) => {
      setFruits(fruitsRes);
      setPizzas(pizzasRes);
    });
  }
  return (
    <div>
      {fruits.map(fruit => <button>{fruit}</button>)}
    </div>
  )
}

import React，{useffect，useState}来自“React”；
函数CustomComponent（）{
常数[果实，刚结果实]=useState（[]）；
const[pizza，setPizzas]=useState（[]）；
useffect（（）=>{
函数gettoff（）{
const fruitResult=API.get（“fruits”，“/fruits”，参数{
});
const pizzaResult=API.get（“pizza”，“/pizza”，参数{
});
返回承诺。全部（[fruitResult，pizzaResult]）
}
get赔率（）。然后（[水果、比萨饼]=>{
坐果；
比萨饼；
});
}
返回(
{fruits.map（fruit=>{fruit}）}
)
}

您至少可以显示组件的代码吗？