React 获取对象数据并渲染

Question

我正在

React.js

做一个个人项目。我正在获取数据，并且想在屏幕上呈现该数据。我遇到了问题，因为它是数据的对象。我的第一次尝试是使用

map

，但没有成功。这是代码：

import { useEffect, useState } from 'react';

const Home = () => {
  const [result, setResult] = useState([]);

  useEffect(() => {
    fetch('https://www.betright.com.au/api/racing/todaysracing')
      .then(res => {
        return res.json();
      })
      .then((data) => {
        setResult(data);
        console.log('data useEffect', data)
      },
      (err) => {
        return console.error(err)
      })
  }, [])
  console.log('result', result)
  return (
    <>
    <h1>Upcoming Racing</h1>
    {result?.map((value, key) => (
        <table key={key}>            
            <thead>
                <tr>
                    <th>Greyhound</th>
                    <th>Harness</th>
                    <th>Throughbred</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{value?.Greyhound?.Venue}</td>
                    <td>{value?.Harness?.Venue}</td>
                    <td>{value?.Throughbred?.Venue}</td>
                </tr>
            </tbody>
        </table>
    ))}
    </>
  );
}

export default Home;

然后我尝试使用

Object.keys/values/entries

，但无论如何我都无法使其工作：

{Object.keys(result).map((value, key) => (
        <li key={key}>
            <span>key: {key} dogs: {result[value].VenueId}</span>
        </li>
    ))}

我的想法是在列表中显示每只狗的前 5 场比赛 这是sandbox中的全部代码。 这是数据的

console.log

：

{Throughbred: Array(7), Harness: Array(6), Greyhound: Array(10)}
Greyhound: Array(10)
0:
CountryCode: "AUS"
MasterCategoryName: "Australian-Greyhound"
Race1:
AdvertisedStartTime: "/Date(1640906160000)/"
CountryCode: null
EventId: 6127205
EventName: null
EventTypeId: 3
HasFixedMarkets: false
IsOpenForBetting: false
MarketShortcuts: null
MasterCategoryName: null
RaceNumber: 8
ResultStatusId: 0
Results: null
SecondsToJump: 200
Venue: null
VenueId: 0
[[Prototype]]: Object
Venue: "Ballarat"
VenueId: 1077
[[Prototype]]: Object
1: {VenueId: 1413, Venue: 'Hove Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
2: {VenueId: 1023, Venue: 'Richmond', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
3: {VenueId: 15831, Venue: 'Towcester Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
4: {VenueId: 1082, Venue: 'Cannington', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
5: {VenueId: 1079, Venue: 'Geelong', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
6: {VenueId: 1026, Venue: 'Wagga', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
7: {VenueId: 12989, Venue: 'Harlow Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
8: {VenueId: 1216, Venue: 'Crayford', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
9: {VenueId: 12976, Venue: 'Newcastle Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
length: 10
[[Prototype]]: Array(0)
Harness: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
Throughbred: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

Answer 1

您可以使用条目来解决这个问题，它会以数组形式给出键和值。

{
  Object.entries(result).map(([key, value]) => (
    <li key={key}>
      <span>
        key: {key}
        dogs: {value.slice(0, 5).map((dog) => dog.VenueId)}
      </span>
    </li>
  ));
}