数据请求是react和后端开启交互的重要一步。我们先写一个 home.js文件来调用数据
import React, { Component } from 'react'
import axios from 'axios'
export default class Home extends Component {
constructor(props){
super(props)
this.state={
arr:[]
}
}
componentDidMount() {
this.ajaxfun()
}
ajaxfun=()=>{
axios.get("http://localhost:4000/***").then((ok)=>{ //所需要json的数据地址
console.log(ok)
this.setState({
arr:ok.data
})
})
}
render() {
return (
<div>
{this.state.arr.map((v,i)=>{
return <p key={i}>{v.name}</p>
})}
</div>
)
}
}
在index.js中调用我们要调用的组件,然后在响应的位置进行渲染输出。
import Home from './components/Home'
ReactDOM.render(<Home />,document.getElementById("demoReact"));