React使用axios请求后端数据并渲染到页面上

import React from "react";
import axios from "axios";
import Network2 from "./Network2"
class Network extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newslist:[]
      };
    
  }
  componentDidMount() {
    /* Http = axios
     * Http调用里面的get方法
     * data是参数 get需要key params post不需要直接{id: '007'}
     * .then()成功回调
     * .catch()失败回调
     */

    let data = {
      params: {
        key: "2fa8bdec666c46942e03ae3a158e2339",
      },
    };
    axios.get("1.json", data).then(
      (res) => {
        const newslist = res.data.newslist;
        // const listItems = newslist.map((newlist) => {
        //     console.log(newlist.title + "----" + newlist.description);
            
        //   return <li>{newlist}</li>;
        // });
        this.setState({newslist:newslist});
        console.log(newslist);
        // return listItems;
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }

  render() {
    return (
      <div>
            <Network2 newslist={ this.state.newslist}/>
      </div>
    );
  }
}
export default Network;

import React from "react";
import './Network2.css'
class Network2 extends React.Component {
  constructor(props) {
      super(props);
      this.state={}
  }
  
  render() {
    return (
        this.props.newslist.map((newlist,i)=>{
            return (
                <ul key={newlist.id} className="text-center">
                  <li className='title'>{newlist.title}</li>
                  <li>{newlist.description}</li>
                </ul>
            )       
        })
    );
  }
}
export default Network2;

参考：大佬
https://blog.csdn.net/YanAhao/article/details/108319950?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1