无法访问属性对象 React答案

【问题标题】：Can't access property object React无法访问属性对象 React
【发布时间】：2020-08-30 13:25:48
【问题描述】：

我是 React 的初学者，我面临一个我无法解决的问题。我从 API 调用中得到一个对象。在我的控制台日志中，它看起来不错。我可以访问一级属性（例如 ID），但如果我想访问 ACF 值，例如，我会收到错误消息：

TypeError：无法访问属性“date_project”，this.state.projet.acf 未定义

我想我没有正确地从 ACF 对象获取数据，但我不明白该怎么做。

这是我的代码：

[import React, { Component } from 'react';
import '../App.scss';
import {Row, Container, Col} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Config} from '../config';
import { withRouter } from "react-router";

class Projet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projet: \[\]
    };
 }

 async componentDidMount() {
  const id = parseInt(this.props.match.params.id);
  const response = await fetch(Config.apiUrl + `wp-json/wp/v2/projet/${id}`);
  const json = await response.json();
  this.setState({ projet: json });
}

renderProjet() {
  console.log('projet', this.state.projet)
  return (
    <p>{this.state.projet.acf.date_projet}</p>
  )
}

  render() {
    return (
      <Container fluid className="App-home">
        <Row className="align-items-left">
          <div>
            { this.renderProjet()}
          </div>
        </Row>
       </Container>
    )
  }
}

export default (Projet);][1]

【问题讨论】：

我想，你必须定义状态项目类型对象，像这样：this.state = { projet: {}};之后，您可以通过 console.log(JSON.stringify(this.state.projet)) 观看 JSON 的结果。如果您发送 Json 结果，我可以为您提供更多帮助。

标签： javascript reactjs object rendering

【解决方案1】：

这是因为异步调用。当它当时试图访问acf 时它不可用。如果数据不可用，要么创建加载变量来跟踪它，要么不渲染组件：

render() {
    if(!this.state.projet?.acf) return null; //Do not render if data is not available
    return (
      <Container fluid className="App-home">
        <Row className="align-items-left">
          <div>
            { this.renderProjet()}
          </div>
        </Row>
       </Container>
    )
  }

【讨论】：