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"}] }

運行結果

總結

以上是生活随笔為你收集整理的前端学习（2310）：数据请求和json-server的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。