代码之家 › 专栏 › 技术社区 › Devin Bowen

如何在reactjs中渲染对象

render get object reactjs javascript

Devin Bowen · 技术社区 · 8 年前

我无法拖动状态中的对象并将其显示在网页上。它在网页上的显示方式并不重要,我只是想知道如何查看它。

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

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

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

2 回复 | 直到 8 年前

Chris West 8 年前

除非我遗漏了什么,否则放下控制台。登录JSX,应该是:

{this.state.avalable}

但更具体地说,如果您希望牙医名称从对象中显示出来,请使用:

{this.state.avalable.dentist}

Devin Bowen 8 年前

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

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

11 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

11 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

11 月前

Luckkks · 过渡色工作不正常

11 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

12 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

12 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

12 月前

noblerare · Vite错误-未定义导出(SSR)

12 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前