Javascript 从api获取数据后，是否在React中显示嵌套对象？

json占位符中的用户数据将地址作为用户对象中的一个对象，我正试图弄清楚如何显示该数据以供学习和理解

import React, { useState, useEffect } from "react";
import "./App.css";

const App = () => {
  const [users, setUsers] = useState([]);
  const [user, setUser] = useState({});
  useEffect(() => {
    getUsers();
    getUser();
    //eslint-disable-next-line
  }, []);

  const getUsers = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    setUsers(data);
  };

  const getUser = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const data = await res.json();
    setUser(data);
    console.log(data);
  };

  return (
    <div className="App">
      <h3 style={{ marginBottom: "5px" }}>
        Getting an Array of users from an Api
      </h3>
      <ul>
        {users.map(user => (
          <li style={{ marginBottom: "5px", paddingLeft: "10px" }}>
            Name:{user.name} <br />
            Email:{user.email}
          </li>
        ))}
      </ul>
      <div className="card" style={{ width: "400px" }}>
        <h3>Name: {user.name}</h3>
        <p>Email: {user.email}</p>

      </div>
    </div>
  );
};

export default App;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
常量应用=（）=>{
const[users，setUsers]=useState（[]）；
const[user，setUser]=useState（{}）；
useffect（（）=>{
getUsers（）；
getUser（）；
//eslint禁用下一行
}, []);
const getUsers=async（）=>{
const res=等待获取（“https://jsonplaceholder.typicode.com/users");
const data=wait res.json（）；
设置用户（数据）；
};
const getUser=async（）=>{
const res=等待获取（“https://jsonplaceholder.typicode.com/users/1");
const data=wait res.json（）；
设置用户（数据）；
控制台日志（数据）；
};
返回(
从Api获取用户数组

{users.map（user=>(

名称：{user.Name}

电子邮件：{user.Email}

))}

名称：{user.Name}
电子邮件：{user.Email}

);
};
导出默认应用程序；

在这一点上，一切都很好

当我试图访问用户地址时，它会抛出一个错误

<div className="card" style={{ width: "400px" }}>
        <h3>Name: {user.name}</h3>
        <p>Email: {user.email}</p>
        <p>Address: {user.address.street}
      </div>

名称：{user.Name}
电子邮件：{user.Email}

地址：{user.Address.street}

---

如何访问对象中的对象和对象

您必须设置init user
因为呈现空值问题

const defaultUser = {
    name: "",
    email: "",
    address: {
        street: ""
    }
};

const [users, setUsers] = useState([defaultUser]);
const [user, setUser] = useState(defaultUser);

---

您必须设置init user
因为呈现空值问题

const defaultUser = {
    name: "",
    email: "",
    address: {
        street: ""
    }
};

const [users, setUsers] = useState([defaultUser]);
const [user, setUser] = useState(defaultUser);