ReactJS无法识别数组内对象值 访问JSON字段提示undefined求助

你贴出的JSON结构完全符合语法规范，不存在解析失败的问题，出现取值为undefined的情况，基本都是两个实现层面的疏漏导致：

• 异步渲染的时序问题
  axios请求是异步执行的，在回调中调用setState更新messages的逻辑，会在组件首次渲染完成后才执行。首次渲染时messages对应的state还没有拿到后端返回的数据，如果你给messages设置的初始值是空对象，访问链路走到messages.message时就已经拿到undefined值，再读它的username属性自然会报错。
  解决这个问题只要给嵌套取值加上可选链做容错即可：

  <p>{messages?.message?.username}</p>
  

  当上层值还没加载完成时，页面会渲染空内容，等异步请求返回、state更新触发重渲染后，就会自动展示正确的username值。
• 赋值的嵌套层级不对齐
  当前接口返回的完整JSON结构中，顶层是messages键，对应的下属值才是包含message对象的部分。按照你写的赋值逻辑，response.data就是整个接口返回的对象，response.data.messages才是要赋值给state的目标值。如果写赋值代码时漏了一层，比如错把整个response.data赋值给了messages state，那实际存到state里的结构就多了一层嵌套，原有的取值路径自然找不到对应的值。
  可以在setState执行前打印一次实际拿到的响应数据，对照确认state里的实际结构，对齐取值路径就能解决问题。

内容的提问来源于stack exchange，提问作者JustOffy.