javascript - 如何在反应js中访问axios请求响应的嵌套对象值

Question

我正在尝试从 Axios 请求的响应中获取我的 project_category 对象的 category_name 这是一条记录，所以我没有将数组映射为一个以我的状态存储的整个对象这就是我试图获取该类别名称的方式

const project=this.state.response;

{project.project_category.category_name}

这是我的形象

标签： javascriptreactjstypescriptreact-reduxjsx

Answer 1

这里的问题是，最初呈现组件时，this.state.singleProject它只是一个空对象，而您正在尝试访问data.address.street，但这会产生如下错误：

未捕获的类型错误：无法读取未定义的属性“街道”

因为data最初是一个空对象。

要解决此问题，您可以简单地使用可选链接运算符 ?.，该运算符允许读取位于连接对象链深处的属性的值，而无需明确验证链中的每个引用是否有效。

因此，您可以像这样更新模板：

return (
  <div className="App">
    <h1>{data?.email}</h1>
    <h2>{data?.address?.street}</h2>
  </div>
);

之后您的代码将正常工作。