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-2defaultbaidujs_title~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1