React获取api数据并渲染_react getapidata-优快云博客

本文详细介绍如何在React项目中使用axios获取API数据，并通过react-router-dom进行路由配置，实现数据的有效渲染。从安装axios和react-router-dom开始，到具体代码实现，包括列表和详情页面的API接口调用，以及数据的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
详情API接口：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.youkuaiyun.com/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;