Question

我无法将状态上的对象拉到我的网页上并显示出来。它在网页上的显示方式并不重要，我只想弄清楚到目前为止如何查看它。

＆＃13;

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios'
const test = require('../controller')

export default class Calandar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      avalable: {},
      unavalable: {}
    }

  }


  componentDidMount() {
    axios.get('/api/avalable').then(res => {
      // console.log(res.data)
      this.setState({avalable: res.data})
    })
  }




  render() {
    return (
      <div>
        Calandar.js
      <div>
        {console.log(this.state.avalable)}
      </div>
      </div>
    );
  }
}

＆＃13;

这是我通过从我的数据库执行get请求而保存的数组。

＆＃13;

0: {…}
avalable: true
date: "1-1-1"
dentist: "dentist_test"
id: 1
name: "dentist_test"
office: "test_office"
time: "01:01:01"

＆＃13;

Answer 1

除非我遗漏了某些内容，否则请删除JSX中的console.log，应该只是：

{this.state.avalable}

但更具体地说，如果您希望牙医名称显示为从对象显示，请使用：

{this.state.avalable.dentist}

Answer 2

我找到了答案，我只是把它放在一个数组而不是一个对象中这是完整的代码，谢谢

import React, { Component } from 'react';
// import {Link} from 'react-router-dom';
import axios from 'axios'

export default class Calandar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      avalable: [],
      unavalable: []
    }

  }


  componentDidMount() {
    axios.get('/api/avalable').then(res => {
      // console.log(res.data)
      this.setState({avalable: res.data})
    })
  }




  render() {
    console.log(this.state.avalable)
    var availabeList = this.state.avalable.map(available => (<div key={available.id}>
      {available.dentist}
    </div>))
    return (
      <div>
        Calandar.js
      <div>
        
        {availabeList}
      </div>
      </div>
    );
  }
}

如何在reactjs中渲染对象

2 个答案: