注意:动态获取的是我自定义的后台数据,使用的时候请修改:componentDidMount中url
使用的数据如下:
{
"data": [
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 408,
"lisense": "",
"lisenseLink": "",
"name": "鸿洋",
"order": 190000,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 409,
"lisense": "",
"lisenseLink": "",
"name": "郭霖",
"order": 190001,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 410,
"lisense": "",
"lisenseLink": "",
"name": "玉刚说",
"order": 190002,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 411,
"lisense": "",
"lisenseLink": "",
"name": "承香墨影",
"order": 190003,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 413,
"lisense": "",
"lisenseLink": "",
"name": "Android群英传",
"order": 190004,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 414,
"lisense": "",
"lisenseLink": "",
"name": "code小生",
"order": 190005,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 415,
"lisense": "",
"lisenseLink": "",
"name": "谷歌开发者",
"order": 190006,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 416,
"lisense": "",
"lisenseLink": "",
"name": "奇卓社",
"order": 190007,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 417,
"lisense": "",
"lisenseLink": "",
"name": "美团技术团队",
"order": 190008,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 420,
"lisense": "",
"lisenseLink": "",
"name": "GcsSloop",
"order": 190009,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 421,
"lisense": "",
"lisenseLink": "",
"name": "互联网侦察",
"order": 190010,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 427,
"lisense": "",
"lisenseLink": "",
"name": "susion随心",
"order": 190011,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 428,
"lisense": "",
"lisenseLink": "",
"name": "程序亦非猿",
"order": 190012,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
},
{
"author": "",
"children": [],
"courseId": 13,
"cover": "",
"desc": "",
"id": 434,
"lisense": "",
"lisenseLink": "",
"name": "Gityuan",
"order": 190013,
"parentChapterId": 407,
"userControlSetTop": "false",
"visible": 1
}
],
"errorCode": 0,
"errorMsg": ""
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>循环数据</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/babel.min.js"></script>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<script src="./lib/axios.min.js"></script>
<script type="text/babel">
const {Component} = React;
// const movies = [
// {
// id: 1,
// name: "我和我的祖国"
// },
// {
// id: 2,
// name: "中国机长"
// },
// {
// id: 3,
// name: "攀登者"
// }]
class MovieList extends Component {
constructor(props) {
super(props);
this.state = {
// movies: [
// {
// id: 1,
// name: "我和我的祖国"
// },
// {
// id: 2,
// name: "中国机长"
// },
// {
// id: 3,
// name: "攀登者"
// }],
movies: [],
};
this.clickHandle = this.clickHandle.bind(this);
}
clickHandle(m) {
console.log(m)
}
// 组件挂载完成
// async componentDidMount() {
// console.log("组件挂载完成")
// axios.post(
// "http://127.0.0.1:8888/books/hello/"
// )
// .then(res=>{
// console.log(res);
// this.setState({
// movies:res.data.data
// })
// })
// }
async componentDidMount() {
console.log("组件挂载完成")
//使用get方法 会存在跨域问题,建议使用post
const result = await axios.post(
"http://127.0.0.1:8888/books/hello/"
);
this.setState({
//获取返回的数据
movies: result.data.data
})
}
render() {
const {movies} = this.state;
return (
<div>
{movies.map(movie =>
<p data-p={movie.id} onClick={() => this.clickHandle(movie)} key={movie.id}>
{movie.name}
</p>)}
</div>
)
}
}
class App extends Component {
render() {
return (
<div>
<h1>我是一个标题</h1>
<MovieList/>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>
success 图