JSON

这是 JSON 对象在状态下的样子。

{ 
  "gender": "male",
  "name": {
    "title":"Mr."
    "first":"Mike",
    "last": "Wazowski"
  },
  ...
}

React

const App = () => {
  const [user, setUser] = React.useState([]);

  React.useEffect(() => {
    axios
      .get("https://randomuser.me/api")
      .then((response) => {
        const info = response.data.results[0];
        setUser(info);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

访问第一个 lvl 数据工作正常

return (
    <div>
      <h1>Hello, {user.gender}</h1> 
      <h1>Hello, {user.email}</h1> 
    </div>
  )

调用对象返回 Err：对象作为 React 子项无效

return (
    <div>
      <h1>Hello, {user.name}</h1>
    </div>
  )

调用嵌套数据返回 TypeError：user.name 未定义错误

return (
    <div>
      <h1>Hello, {user.name.first}</h1>
    </div>
  )

为什么我可以访问像性别这样的“第一级”数据，但不能访问像 name.first 这样的“第二级”数据？

我需要一些我不知道的特殊语法吗？