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

【问题标题】：How to display data coming from API in React buttons如何在 React 按钮中显示来自 API 的数据
【发布时间】：2020-02-20 03:30:33
【问题描述】：

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

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"
     },
      ...
     ] 
  ]

}

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

【问题讨论】：

你能至少显示你的组件的代码吗？

标签： reactjs api button react-component

【解决方案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>
  )
}

【讨论】：