React實戰——問題及解決方法

1. 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;

2. 使用二級路由，點擊“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;

3. 一共十五條數據，需要在頁面上隨機顯示八條

• 解決：使用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;