react--axios

• 学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

安装

npm i axios --save

docs

• https://www.npmjs.com/package/axios

基本使用

const axios = require('axios');
 
// Make a request for a user with a given ID
axios.get(url)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
 

axios+react渲染数据列表

目录结构

• App.js

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './components/Home'
import Info from './components/Info'
class App extends React.Component {
  render() {

    return (
      <Router>
        <Route exact path="/" component={Home}  />
        <Route path="/info/:name" component={Info} />
      </Router>
    );
  }
}

export default App;

• Home.js

import React from 'react'
import { Link } from "react-router-dom";
import '../css/home.css'
const axios = require('axios');
class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            list: []
      
        }

    }
    getDate = () => {
        const url = "https://lengyuexin.github.io/json/app.json";
        axios.get(url)
            .then((response) => {

                this.setState({
                    list: response.data.goods[0].foods
                })
            })

    }
    componentDidMount() {
        this.getDate();
    }

    render() {
        return (
            <div>


                <div className="container">
                    <h2>热销榜单</h2>
                    <div className="list">

                        {this.state.list.map((item, i) => {
                            return (
                                <div className="list-item" key={i}>
                                    <Link  to={`/info/${item.name}`}> <img src={item.image} alt={item.name} /></Link>
                                    <p>{item.name}</p>
                                </div>

                            )
                        })}

                    </div>
                </div>
            </div>

        );
    }
}

export default Home;

• Info.js

import React from 'react';
import '../css/info.css';
const axios = require('axios');


class Info extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
    }

    getDate = () => {
        const url = "https://lengyuexin.github.io/json/app.json";
        axios.get(url)
            .then((response) => {

                this.setState({
                    list: response.data.goods[0].foods
                })

            })

    }
    componentDidMount() {
        this.getDate();
    }

    render() {
        return (

            <div>
                {
                    this.state.list.map((item, i) => {
                        if (item.name === this.props.match.params.name) {
                            return (
                                <div className="info" key={i}>
                                    <h2>商品详情--{item.name}</h2>
                                    <img src={item.image} alt={item.name} />
                                    <div className="desc">
                                        <p>商品单价--{item.price}</p>
                                        <p>销售额--{+item.sellCount * item.price}</p>
                                        <p>{item.comments[0].text.length>0?"商品评价":"暂无评价"}</p>
                                        <ul>
                                            {
                                                item.comments.map((comment, idx) => {
                                                   
                                                if (comment.text.length > 0) {
                                                  
                                                    return (
                                                            <li key={idx} style={{ listStyle: "none" }} >
                                                                <p style={{ color: "red", marginTop: "2px" }}>{comment.text}</p>
                                                            </li>
                                                    )
                                                }
                                                return null;
                                               
                                          

                                            } )}
                                        </ul>
                                    </div>
                                </div>
                            )
                        }
                        return null;
                    })
                }


            </div>
        );
    }
}

export default Info;

• home.css

* { box-sizing: border-box; margin:0;padding:0;}

html,body,.container{
  width:100%;
  height:100%;
  background:#f3f5f7;
  padding:4%;
  font-size:12px;
  color:#2cc95e;
  
}
.container h2{
  text-align: center;
  color:#333;
  margin-bottom:20px;
}
.container .list{
width:100%;
text-align: center;

}
.container .list .list-item {
 float:left;
 width:20%;
 box-shadow: 6px 0px 6px #999;
 padding:5px;

}

.container .list .list-item img{
  width:60px;
  height:60px;
}

• info.css

.info{
    width:300px;
    height:600px;
    text-align: center;
    margin:20px auto;
    background-color: #fff;
    color:#333;
    padding:20px 0;
  

}
.info h2{
    font-size:16px;
   margin-bottom: 10px;

}
.info img{
    width:160px;
    height:160px;
}

.info .desc{

    border: 1px solid #333;
    margin-top:10px;
    font-size:14px;
    padding:5px;
}

效果图

数据接口

• https://lengyuexin.github.io/json/app.json