利用create-react-app创建项目,react16.8+版本,以及react-router5+版本,配合axios进行数据交互
准备商品列表组件Home.js:
import React ,{Component}from 'react';
import {NavLink} from 'react-router-dom'
import axios from 'axios';
import style from './Home.module.css'
export default class Home extends Component{
constructor(props) {
super(props)
this.state={
list:[]
}
}
render(){
return(
<div>
<h2 className={style.tit}>home</h2>
<div>
{
this.state.list.map((item,i)=>{
return(
<div key={i}><NavLink to={{pathname:"/detail",state:{id:item.pid}}}>{item.pname}</NavLink></div>
)
})
}
</div>
</div>
)
}
componentDidMount(){
axios({
url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
params:{uid:19802,pagesize:95}
}).then((data)=>{
console.log(data.data.data)
this.setState({list:data.data.data})
})
}
}