React获取api数据并渲染
1：进入当前项目安装axios
命令：npm install axios
引入：const axios = require('axios');
1
2
3
2：安装路由
命令：npm install react-router-dom
引入：import { Link } from "react-router-dom";
1
2
3
API接口地址：
列表API接口：http://a.itying.com/api/productlist
详情API接口：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955
示例代码如下：
/* eslint-disable no-undef */
import React from 'react';
//路由配置
import { Link } from "react-router-dom";
import './Home.css'
// axios配置
const axios = require('axios');
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [], //创建数组用来保存获取的接口数据
urls: "http://a.itying.com/" //这里创建urls保存接口的路径，后面img标签调用图片用到
}
}
// 获取数据方法函数
getApiData = () => {
var api = this.state.urls + "api/productlist"; //拼接api地址
axios.get(api)
.then(res => {
console.log(res.data.result);
this.setState({
list: res.data.result //获取的数据保存到list数组
})
})
.catch(err => {
console.error(err);
})
}
// 生命周期函数---渲染后调用
componentDidMount() {
this.getApiData();
}
render() {
return (
<div className="home">
<div className="item">
{
//一级渲染
this.state.list.map((item, index) => {
return (
<div className="list" key={index}>
<h5>{item.title}</h5>
<ul>
{
// 二级渲染
item.list.map((lis, index) => {
return (
<li key={index}>
<Link to={`/Dateils/${lis._id}`}>
<div>
[外链图片转存失败(img-11qnCxsk-1562056802644)(https://mp.csdn.net/mdeditor/%7B%60$%7Bthis.state.urls%7D$%7Blis.img_url%7D%60%7D)]
</div>
<p>{lis.title}</p>
<p style={{color:"red"}}>{lis.price}元</p>
</Link>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
)
}
}
export default Home;
————————————————
版权声明：本文为CSDN博主「菊花枸杞茶」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34227291/article/details/94454115
单页面可用：
import React from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
/* eslint-disable no-undef */
//路由配置
//import { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from 'react-router';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import {BrowserRouter, Route} from 'react-router-dom'
// axios配置
const axios = require('axios');
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [], //创建数组用来保存获取的接口数据
urls: "http://a.itying.com/" //这里创建urls保存接口的路径，后面img标签调用图片用到
}
}
// 获取数据方法函数
getApiData = () => {
var api = this.state.urls + "api/productlist"; //拼接api地址
axios.get(api)
.then(res => {
console.log(res.data.result);
this.setState({
list: res.data.result //获取的数据保存到list数组
})
})
.catch(err => {
console.error(err);
})
}
// 生命周期函数---渲染后调用
componentDidMount() {
this.getApiData();
}
render() {
return (
<div className="App">
<BrowserRouter> <div className="item">
{
//一级渲染
this.state.list.map((item, index) => {
return (
<div className="list" key={index}>
<h5>{item.title}{item.pid}</h5>
<ul>
{
// 二级渲染
item.list.map((lis, index) => {
return (
<li key={index}>
<Link to={`/Dateils/${lis._id}`}>
<div>
</div>
<p>{lis.title}</p>
<p style={{color:"red"}}>{lis.price}元</p>
</Link>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</BrowserRouter> </div>
)
}
}
export default Home;
下载地址:
create-react-app入门教程
npx 使用方法 |
