无法在反应中显示存储在状态对象中的数据答案

【问题标题】：Not able to display the data stored in a state object in react无法在反应中显示存储在状态对象中的数据
【发布时间】：2019-12-03 09:17:51
【问题描述】：

我是新手，正在尝试在组件中显示 json 文件的内容。json 文件具有单个对象的三个数据字段，并使用 axios 将其提取到我的组件中。数据已成功检索并且状态也已设置（从 console.log 中找到），但是当我尝试在 render 方法中显示数据时，它无法识别并且没有任何显示（即{this.state.lockerData.data['location']} 不起作用） . 非常欢迎任何帮助。提前致谢！

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import axios from 'axios';



class LockerCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {lockerData:''}

  }
  componentDidMount() {
    this.getLockerData();
  }

  getLockerData() {
    axios.get('lockerDetails.json').then(response => {
      this.setState({lockerData: response})
      console.log(response.data);

      console.log(this.state.lockerData.data['location']);
    })

  };


  render() {
    return (
      <div>
      <div className="grid-item">
    <span id="location" >{this.state.lockerData.data['location']}</span>
          <br /><br />
          <b>&pound;<span id="cost">{}</span></b>
          <br/><br/>
          <span id="lockeruse">{}</span>
          <br/>
          <input type="button" id="openButton"  value="Open" />&nbsp;&nbsp;
          <input type="button" id="releaseButton" value="Release" />    
      </div>
      </div>
    );
  }
}
  ReactDOM.render(<LockerCard />,document.getElementById('root'));

【问题讨论】：

检查stackoverflow.com/a/59153777/6544460，如果您有任何问题，请告诉我
在未定义的情况下尝试访问this.state.lockerData.data，您是否在初始渲染时没有收到任何错误？

标签： javascript html reactjs axios

【解决方案1】：

像这样访问{this.state.lockerData.location}

return (
      <div>
      <div className="grid-item">
        <span id="location" >{this.state.lockerData.location}</span>
          <br /><br />
          <b>&pound;<span id="cost">{}</span></b>
          <br/><br/>
          <span id="lockeruse">{}</span>
          <br/>
          <input type="button" id="openButton"  value="Open" />&nbsp;&nbsp;
          <input type="button" id="releaseButton" value="Release" />    
      </div>
      </div>
    );

【讨论】：