获取嵌套JSON数据并使用React呈现它们的正确方法

{
  "name": "John",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY"
  },
  "friends": [
    {
      "name": "Jane",
      "age": 28
    },
    {
      "name": "Bob",
      "age": 32
    }
  ]
}

import React from 'react';

const Person = ({ name, age, address, friends }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Address: {address.street}, {address.city}, {address.state}</p>
      <h3>Friends:</h3>
      <ul>
        {friends.map((friend, index) => (
          <li key={index}>{friend.name}, {friend.age}</li>
        ))}
      </ul>
    </div>
  );
};

export default Person;

import React from 'react';
import Person from './Person';

const App = () => {
  const jsonData = {
    "name": "John",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "New York",
      "state": "NY"
    },
    "friends": [
      {
        "name": "Jane",
        "age": 28
      },
      {
        "name": "Bob",
        "age": 32
      }
    ]
  };

  return (
    <div>
      <h1>Person Details:</h1>
      <Person
        name={jsonData.name}
        age={jsonData.age}
        address={jsonData.address}
        friends={jsonData.friends}
      />
    </div>
  );
};

export default App;

Person Details:
John
Age: 30
Address: 123 Main St, New York, NY
Friends:
- Jane, 28
- Bob, 32