//fetch和动态渲染
import React from 'react'
export default class Fetch extends React.Component{
constructor(props){
super(props)
this.state={
list:''//初始化list的值
}
}
//动态渲染
componentDidMount(){
fetch('http://iwenwiki.com/api/blueberrypai/getIndexMovement.php')
.then(src=>src.json())
.then(data=>{
this.setState({
list:data
})
console.log(data);
console.log(this.state.list.movement[0].title);
})
}
// 模拟get
// get(){
// fetch('http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php',{data:'参数'})//第二个参数可以传参
// .then(src=>src.json())
// .then(data=>{console.log(data)})
// }
// 模拟post
// post(){
// fetch('http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php',{
// method:'POST',
// body:"msg_code:10000&userid:aays",//fetch接收的参数,必须是字符串类型
// headers:new Headers({//请求头
// 'Accept':'application/json,text/plain,*/*',//访问权限
// 'Content-Type':'application/json'//内容类型
// }),
// })
// .then(src=>src.json())
// .then(data=>{console.log(data);})
// }
render(){
// const {list}=this.state//即调用list的时候自动变成this.state.list
return(
<div>
{/* <button onClick={this.get}>Fectch用get获取数据</button>
<button onClick={this.post}>Fetch用post获取数据</button> */}
{
this.state.list.movement.map((element,index)=>{
return(
<ul>
<li>element.title</li>
<li></li>
<li></li>
</ul>
)
})
}
</div>
)
}
}
