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

Question

我正在尝试显示来自每个API调用的数据数组。假设我有一个/ fruits API和/ pizza API。我想以表格格式显示，该表格格式由json数组中的每个元素分隔。鉴于API代码按预期工作，我该如何反应？

function getOdds() {
    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"
     },
      ...
     ] 
  ]

}

理想情况下，我希望价格/重量成为可点击的按钮，它看起来像这样：

Answer 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>
  )
}