前端学习（2310）：数据请求和json-server

app.js

import React from 'react';

import './App.css';
import  Home from './components/Home.js'
import World from "./components/World";
function App() {
  return (
    <div className="App">
      你好
    <World/>
    </div>
  );
}

export default App;

world.js

import React, {Component} from 'react';
import axios from 'axios'
class World extends Component {
    constructor(props) {
        super(props);
        this.state={
            arr:[]
        }
    }
    componentDidMount() {
        this.ajaxfun()
    }
    ajaxfun=()=>{
        axios.get("http://localhost:4000/arr").then((ok)=>{
            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>
        );
    }
}

export default World;

data.json

{
  "arr":[
    {"id":1,"name":"小明1"},
    {"id":2,"name":"小明2"},
    {"id":3,"name":"小明3"},
    {"id":4,"name":"小明4"}
  ]
}

运行结果