如何在 React 组件中渲染获取的对象项答案

【问题标题】：How to Render Fetched Object Items in React Component [duplicate]如何在 React 组件中渲染获取的对象项
【发布时间】：2021-12-27 21:58:28
【问题描述】：

如何渲染我在 React 中获取的对象？

这是我的代码：

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState({});

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(data));
  }, []);

  console.log(data);

  return <div> // Here is where I want my objects to return </div>;
};

这是获取的数据返回的内容：

{
  "code": 200,
  "status": "OK",
  "data": {
    "timings": {
      "Fajr": "06:42",
      "Sunrise": "09:00",
      "Dhuhr": "12:13",
      "Asr": "13:17",
      "Sunset": "15:27",
      "Maghrib": "16:00",
      "Isha": "17:29",
      "Imsak": "06:32",
      "Midnight": "00:13"
    }
}

我想提取“数据”，然后是“计时”，然后是每个项目及其密钥。如何在组件的 return 语句中执行此操作？

感谢您提前回答

【问题讨论】：

标签： javascript reactjs object

【解决方案1】：

通过使用Object.keys(data)：

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState({});

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(data));
  }, []);

  console.log(data);

  return (
  <div>
  {Object.keys(data.timings).map((key, index) =>
    <span key={index}>{key}:{data.timings[key]}</span>
  )}
  </div>
  );
};

一次性从对象转换为数组的另一种解决方案是：

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState([]);

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(Object.entries(data.data.timings)));
  }, []);

  console.log(data);

  return (
  <div>
  {data.map(([key, value], index) =>
    <span key={index}>{key}:{value}</span>
  )}
  </div>
  );
};

【讨论】：

感谢您的帮助，非常感谢：D
很高兴听到这个消息！ @MustafaSaidHelal
很抱歉打扰你，但我仍然遇到问题.. 我似乎无法让它工作，我尝试了你的代码，但在运行时我仍然遇到错误：/是因为我使用的是 TypeScript 吗？
完全没问题。有什么问题？
它一直说“找不到名称键”和“找不到名称索引”：/ 是因为我使用的是 TypeScript 吗？我应该使用普通的 JS 吗？

【解决方案2】：

如果您的组件直接显示数据，您应该返回 {data.data.timings.Fajr},{data.data.timings.Sunrise},...。如果您的组件只返回需要在另一个组件中显示的数据，您应该键入：return data.data.timings;

【讨论】：

谢谢你们的帮助:)