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

Question

I am new to react and am trying to display the content of a json file in a component.The json file has three data fields of a single object and it is fetched using axios into my component. The data is successfully retrieved and the state is also set(found from console.log), but when i try to display the data in the render method, it is not recognised and nothing is displayed(ie {this.state.lockerData.data['location']} doesn't work). Any help is much welcome. Thanks in advance!

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'));

Answer 1

Access like this {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>
    );