- axios请求页面渲染报错
- 解决:将需要请求的页面渲染使用三元运算符,有值走页面渲染,没值则绘制为空(后面还有生命周期)
import React from 'react';
import axios from 'axios';
import GoBack from '../smallPage/GoBack';
import '../../Assets/css/storeDetail.css';
class StoreDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
food:null
};
}
componentDidMount(){
axios.get("/food").then((res)=>{
console.log(res);
this.setState({
food:res.data.result.data
});
});
}
render() {
return (
this.state.food?
<div>
<GoBack title={this.state.food.poi_info.name}/>
<div className="foodimage">
<img src={this.state.food.poi_info.head_pic_url} alt=""/>
</div>
</div>
:''
);
}
}
export default StoreDetail;
- 使用二级路由,点击“GoBack”不能进行返回
- 使用二级路由:
import React from 'react';
import axios from 'axios';
import GoBack from '../smallPage/GoBack';
import '../../Assets/css/storeDetail.css';
import MenuList from '../../Mock/MenuList';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Order from '../menuPage/Order';
import Evaluate from '../menuPage/Evaluate';
import Business from '../menuPage/Business';
class StoreDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
food:null,
menulist:MenuList
};
}
componentDidMount(){
axios.get("/food").then((res)=>{
console.log(res);
this.setState({
food:res.data.result.data
});
});
}
userSelect=(index)=>{
MenuList.forEach((val,key)=>{
val.isshow=false;
if(key===index){
val.isshow=true;
}
});
this.setState({
menulist:MenuList
});
}
render() {
return (
this.state.food?
<div>
<GoBack title={this.state.food.poi_info.name}/>
<div className="foodimage">
<img src={this.state.food.poi_info.pic_url} alt=""/>
<img src={this.state.food.poi_info.head_pic_url} alt=""/>
<span>{this.state.food.poi_info.name}</span>
</div>
<Router>
<ul className="menulist">
{
this.state.menulist.map((value,index)=>{
return (
<Link to={'/detail'+value.action} key={index}>
<li onClick={this.userSelect.bind(this,index)}>
{value.title}
<span className={value.isshow?'foodline':''}></span>
</li>
</Link>
)
})
}
</ul>
<Route exact path="/detail/order" component={Order}></Route>
<Route path="/detail/evaluate" component={Evaluate}></Route>
<Route path="/detail/business" component={Business}></Route>
</Router>
</div>
:''
);
}
}
export default StoreDetail;
- 解决:撤销二级路由,根据判断动态渲染看走哪个容器
import React from 'react';
import axios from 'axios';
import GoBack from '../smallPage/GoBack';
import '../../Assets/css/storeDetail.css';
import MenuList from '../../Mock/MenuList';
import Order from '../menuPage/Order';
import Evaluate from '../menuPage/Evaluate';
import Business from '../menuPage/Business';
class StoreDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
food:null,
menulist:MenuList
};
}
componentDidMount(){
axios.get("/food").then((res)=>{
console.log(res);
this.setState({
food:res.data.result.data
});
});
}
userSelect=(index)=>{
MenuList.forEach((val,key)=>{
val.isshow=false;
if(key===index){
val.isshow=true;
}
});
this.setState({
menulist:MenuList
});
}
render() {
return (
this.state.food?
<div>
<GoBack title={this.state.food.poi_info.name}/>
<div className="foodimage">
<img src={this.state.food.poi_info.pic_url} alt=""/>
<img src={this.state.food.poi_info.head_pic_url} alt=""/>
<span>{this.state.food.poi_info.name}</span>
</div>
<div>
<ul className="menulist">
{
this.state.menulist.map((value,index)=>{
return (
<li key={index} onClick={this.userSelect.bind(this,index)}>
{value.title}
<span className={value.isshow?'foodline':''}></span>
</li>
)
})
}
</ul>
</div>
{
this.state.menulist.map((value,index)=>{
if(value.isshow&&index===0){
return <Order key={index}/>
}else if(value.isshow&&index===1){
return <Evaluate key={index}/>
}else if(value.isshow&&index===2){
return <Business key={index}/>
}else{
return '';
}
})
}
</div>
:''
);
}
}
export default StoreDetail;
- 一共十五条数据,需要在页面上随机显示八条
- 解决:使用splice方法,随机一个索引位往后取八条数据;在state里定义原始数据,渲染完成之后通过setState修改原始数据
IndexList .js:
import React from 'react';
import axios from 'axios';
import '../../Assets/css/IndexList.css';
class IndexList extends React.Component {
constructor(props) {
super(props);
this.state = {
lists:[],
index:0,
len:8
};
}
componentDidMount(){
axios.get("/list").then((res)=>{
this.setState({
lists:res.data.result.data.primary_filter
});
console.log(this.state.lists);
});
let ran=Math.floor(Math.random()*8);
this.setState({
index:ran
});
}
render() {
return (
<div className="mainlist">
<ul>
{
this.state.lists.splice(this.state.index,this.state.len).map((value,index)=>{
return (
<li key={index}>
<img src={value.url} alt=""/>
<span>{value.name}</span>
</li>
)
})
}
</ul>
</div>
);
}
}
export default IndexList;