Javascript Can'；t使用react&；访问嵌套JSON；钩子。打字错误 JSON

这就是json对象在状态下的外观

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

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

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

返回(
你好，{user.gender}
你好，{user.email}
)

调用对象返回错误：对象作为子对象无效

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

返回(
您好，{user.name}
)           

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

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

返回(
你好，{user.name.first}
)

为什么我可以访问诸如性别之类的“一级”数据，而不能访问诸如name.first之类的“二级”数据

---

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

我相信您的错误发生在不同的时间-您将对象初始化为空数组，因此您可以访问一级字段（未定义），但不能访问它们的字段（因此user.name未定义）。然后填充数据，

user.name

成为一个对象，并且不能在DOM中进行渲染，因此得到的

对象作为子对象无效。要解决这个问题，只需添加一个空检查-
Hello，{user.name&&user.name.first}
我认为代码的问题在于，您试图使用
响应.data.results[0]
而不将其转换为JavaScript对象。也就是说，API的响应是JSON，您需要将其转换为JS对象

在使用对象之前，能否尝试将
response.data.results[0]
JSON解析为对象

这应该起作用：

const info = JSON.parse(response.data.results[0]);

在最后一个代码块上，尝试
{user['name']['first']}
。我想它把name和
首先理解为变量？@Andreas谢谢你的链接。所以我应该使用JSON.parse（resp.data.results[0]）使其成为一个对象文本？我对axios的
。。。检查
response.data
/
response.data.results
的内容。如果它是一个字符串，您可能必须首先解析它才能在此基础上进行构建，那么您还可以将嵌套的空对象作为默认对象传递给
useState
。类似于
const[user，setUser]=React.useState（{name:{first:''}）是否应将状态初始化为“null”？空检查确实解决了问题！如果将状态初始化为null，则必须对所有字段进行null检查，这当然是一个选项，但可能很费劲。或者使用@JimJ建议并使用虚拟对象。不管你喜欢哪一套，只要试一下就行了。返回TypeError:user.name是undefinedOk，您可以执行
console.log（info）
并与我们共享它吗？Nadia的空检查工作而无需解析。我很好奇为什么会这样，如果您仍然希望看到控制台输出，请告诉我。哦，很高兴您找到了解决方案。：）
const info = JSON.parse(response.data.results[0]);