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

Question

我是新手，正在尝试在组件中显示 json 文件的内容。json 文件具有单个对象的三个数据字段，并使用 axios 将其提取到我的组件中。数据已成功检索并且状态也已设置（从 console.log 中找到），但是当我尝试在渲染方法中显示数据时，它无法识别并且没有任何显示（即{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'));

标签： javascripthtmlreactjsaxios

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