React菜品详情查看

素颜马尾好姑娘i 2021-09-29 04:24 268阅读 0赞

# React菜品详情查看 #

菜列表文档地址：[https://blog.csdn.net/qq\_34227291/article/details/94454115][https_blog.csdn.net_qq_34227291_article_details_94454115]

PS：菜详情页与菜列表页的思路比较相似的;首先安装axios，在SRC目录下的package.js文件可以看到安装完成的axios;然后就是调用API接口，在调用成功后的函数中设置数据源，详细页是根据菜列表页的\_id来获取对应的数据。  
示例中的变量id用来保存通过路由传过来的ID，最后在渲染前的生命周期函数调用。（详情页没有做路由跳转）

**1：进入当前项目安装axios**

命令：npm install axios
    引入：const axios = require('axios');

**示例代码如下：**

import React from 'react';
    // axios配置
    const axios = require('axios');
    
    class Dateils extends React.Component {
        constructor(props) {
            super(props);
            console.log(this.props);
            this.state = {
                list: [],
                urls: "http://a.itying.com/"
            }
        }
        // 获取数据方法函数
        requessData(id) {
            var api = this.state.urls + "api/productcontent?id=" + id;
            axios.get(api)
                .then(res => {
                    console.log(res.data.result);
                    this.setState({
                        list: res.data.result[0]        //获取的数据保存给list数据
                    })
                })
                .catch(err => {
                    console.error(err);
                })
        }
        // 生命周期函数---渲染前调用
        componentWillMount() {
            let id = this.props.match.params._id;
            console.log(id);
            this.requessData(id);
        }
        render() {
            return (
                <div>
                    {/* 渲染数据 */}
                    <div>
                        [外链图片转存失败(img-LiTereRQ-1562057219453)(https://mp.csdn.net/mdeditor/%7B%60$%7Bthis.state.urls%7D$%7Bthis.state.list.img_url%7D%60%7D)]
                    </div>
                    <p>{this.state.list.title}</p>
                    <p>{this.state.list.price}元</p>
                    <p>{this.state.list.content}</p>
                </div>
            )
        }
    }
    
    export default Dateils;

[https_blog.csdn.net_qq_34227291_article_details_94454115]: https://blog.csdn.net/qq_34227291/article/details/94454115