react 在组件中请求ajax

矫情吗；* 2021-07-24 16:31 369阅读 0赞

注意:(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>