数据请求是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"));