react 在组件中请求ajax
程序员文章站
2024-02-27 22:59:21
...
注意:(1)请求ajax应该等到页面渲染完后请求,所以应该在componentDidMount生命周期函数中使用
(2)因为jq中的ajax指向ajax本身,所以this.setState({})方法无效,应该在jq
的回调函数再.bind(this);修改绑定回调函数的this,将回调函数调用者变成componentDidMount函数,
而该函数的this指向组件,因此this.setState({})方法生效,可以修改state状态
代码示例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/browser.min.js"></script>
<script src="js/libs/react.js"></script>
<script src="js/libs/react-dom.js"></script>
<script src="js/libs/jquery-3.4.1.js"></script>
<style>
.d1{
color:orange;
}
</style>
</head>
<body>
<div class="big">
</div>
<div class="big2">
</div>
<div class='big3'>
</div>
<script type="text/babel">
var arr=[1,2,3,4,5];
var arr1=[<p>p1</p>,<p>p2</p>,<p>p3</p>];
var obj=[{name:'jeff',age:18},{name:'mike',age:19}]
var Hello=React.createClass({
getInitialState:function()
{
return{
info:
{title:"",
content:'',
img:''}
}
},
//在生命函数中读取数据
//在渲染完成后读取数据,即页面加载后
componentDidMount:function()
{
$.ajax({
type:'get',
url:'6.php',
dataType:'json',
success:function(res)
{
console.log(this);
this.setState({
info:res
})
}.bind(this)
})
},
render:function()
{
return (
<div>
{
<ul>
<li>{this.state.info.title}</li>
<li>{this.state.info.content}</li>
<li>{this.state.info.img}</li>
</ul>
}
</div>
)
}
})
ReactDOM.render(<Hello />,document.querySelector(".big"))
</script>
</body>
</html>