React菜品详情查看

最新推荐文章于 2021-07-14 08:00:00 发布

菊花枸杞茶

最新推荐文章于 2021-07-14 08:00:00 发布

阅读量372

点赞数 2

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_34227291/article/details/94455094

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React菜品详情查看

菜列表文档地址：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;