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

【问题标题】：how to access nested object value of axios request's response in react js如何在反应js中访问axios请求响应的嵌套对象值
【发布时间】：2020-09-02 11:00:40
【问题描述】：

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

const project=this.state.response;

{project.project_category.category_name}

这是我的图片

【问题讨论】：

这应该可以正常工作。请为此使用codesandbox.io 创建一个small demo 以显示正在发生的问题。
@palaѕн 这里是示例codesandbox.io/s/…
试试 this.state.response.data.project.project_category.category_name
@ertemishakk 请检查上面的示例链接，以便您了解此问题
您期望什么输出？列表或特定行？

标签： javascript reactjs typescript react-redux jsx

【解决方案1】：

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

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

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

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

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

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

然后你的代码就可以正常工作了。

【讨论】：

【解决方案2】：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      singleProject: {},
      errs: ""
    };
  }

  componentDidMount() {
    Axios.get("https://jsonplaceholder.typicode.com/users")
    .then(res=>{
      this.setState({
        data:res.data
      })
    })
  }
  render() {

    const data = this.state.data;
    return (
      <div className="App">
        {data.map(eachData=>(
          <div key={eachData.id}>
            <h1>{eachData.email}</h1>
        <h2>{eachData.address.street}</h2> 
            </div>
        ))}

      </div>
    );
  }
}
export default App;

【讨论】：

是的，你是对的，但在我上面的场景中，答案很好