React获取api数据并渲染

不念不忘少年蓝@ 2021-09-29 04:24 575阅读 0赞

# React获取api数据并渲染 #

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

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

**2：安装路由**

命令：npm install react-router-dom
    
    引入：import { Link } from "react-router-dom";

**API接口地址：**  
列表API接口：[http://a.itying.com/api/productlist][http_a.itying.com_api_productlist]  
详情API接口：[http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955][http_a.itying.com_api_productcontent_id_5ac1a22011f48140d0002955]

**示例代码如下：**

/* eslint-disable no-undef */
    import React from 'react';
    //路由配置
    import { Link } from "react-router-dom";
    import './Home.css'
    // axios配置
    const axios = require('axios');
    
    class Home extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: [],                       //创建数组用来保存获取的接口数据
                urls: "http://a.itying.com/"    //这里创建urls保存接口的路径，后面img标签调用图片用到
            }
        }
    
    // 获取数据方法函数
    getApiData = () => {
        var api = this.state.urls + "api/productlist";  //拼接api地址
    
        axios.get(api)
            .then(res => {
                console.log(res.data.result);
                this.setState({
                    list: res.data.result   //获取的数据保存到list数组
                })
            })
            .catch(err => {
                console.error(err);
            })
    }
    // 生命周期函数---渲染后调用
    componentDidMount() {
        this.getApiData();
    }
    render() {
        return (
            <div className="home">
                <div className="item">
                    {
                        //一级渲染
                        this.state.list.map((item, index) => {
                            return (
                                <div className="list" key={index}>
                                    <h5>{item.title}</h5>
                                    <ul>
                                        {
                                            // 二级渲染
                                            item.list.map((lis, index) => {
                                                return (
                                                    <li key={index}>
                                                        <Link to={`/Dateils/${lis._id}`}>
                                                            <div>
                                                                [外链图片转存失败(img-11qnCxsk-1562056802644)(https://mp.csdn.net/mdeditor/%7B%60$%7Bthis.state.urls%7D$%7Blis.img_url%7D%60%7D)]
                                                            </div>
                                                            <p>{lis.title}</p>
                                                            <p style={
       {color:"red"}}>{lis.price}元</p>
                                                        </Link>
                                                    </li>
                                                )
                                            })
                                        }
    
                                    </ul>
    
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
    }
    
    export default Home;

[http_a.itying.com_api_productlist]: http://a.itying.com/api/productlist
[http_a.itying.com_api_productcontent_id_5ac1a22011f48140d0002955]: http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955