以下是使用React和ES2015进行操作的一种方法。 您将需要在构造函数中设置默认状态,并像下面的示例中那样获取请求。只需切换名称以使其与您的应用程序一起工作。然后映射您从get请求的响应中返回的数组。当然,改变名称和样式以满足您的需求,我使用Bootstrap使事情易于理解。希望这可以帮助。

import React, { Component } from 'react'

import axios from 'axios';

import cookie from 'react-cookie';

import { Modal,Button } from 'react-bootstrap'

import { API_URL, CLIENT_ROOT_URL, errorHandler } from '../../actions/index';

class NameofClass extends Component {

constructor(props) {

super(props)

this.state = {

classrooms: [],

profile: {country: '', firstName: '', lastName: '', gravatar: '', organization: ''}

}

}

componentDidMount(){

const authorization = "Some Name" + cookie.load('token').replace("JWT","")

axios.get(`${API_URL}/your/endpoint`, {

headers: { 'Authorization': authorization }

})

.then(response => {

this.setState({

classrooms:response.data.classrooms,

profile:response.data.profile

})

})

.then(response => {

this.setState({classrooms: response.data.profile})

})

.catch((error) => {

console.log("error",error)

})

}

render() {

return (

NameofClass Page

Welcome {this.state.profile.firstName} {this.state.profile.lastName}

{

this.state.classrooms.map((room) => {

return (

{room.name}

)

})

}

)

}

}

export default NameofClass

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐