新手求助,本来用php已经实现,现在换成ajax请求不会用了

#1 
var dtarray={};
var Main = React.createClass({
    getInitialState:function(){
      return {
          listArr:this.props.listArr,
          Length:this.props.length,
      }
    },
	componentDidMount:function(){
		var that = this;
		//ajax请求数据
		$.ajax({ 		        
	      url: 'api/newsapi.php',
	      data:{
	          'oper':'news'
	           },
	      type: "post", 		       
	      success: function (data) 
	      {  
	        data = eval('('+data+')');
	      	
			dtarray=data;
	        console.info(dtarray);
			that.setState({dtarray:dtarray});
	      }
	    });
		

		
		if(dtarray.length<=10){
			$('.pages').hide();
		}

		/*
			事件传递. 点击加载更多时获取
		*/
		PubSub.subscribe("addItem",function(evName){
				ncount = countnow+10;
				countnow = ncount;
				if(ncount<=dtarray.length){
					this.setState({Length:ncount});
				}else{
					this.setState({Length:dtarray.length});
				}
		}.bind(this));
	},
    render:function(){
      return(
          <div>
                <Image />
                <NavBar listArr={this.state.listArr}/>
                <Content {...dtarray} Length={this.state.Length}/>
                <AddMore />
                <HomeButton />
          </div>
      )
    }
});
 var obj = {
    	length:10,
        listArr:['推荐','霾情','研析','专家','知识','健康']
    };

   ReactDOM.render(
      <Main {...obj}/>,
      document.getElementById('main'),
      function(){
        console.info("success");
      }
   );

报错,不知道该怎么改,求大神指教.那个数据怎么传递

#2

ajax是异步的，ajax的success callback外的判断长度JS代码毫无卵用，dtarray都是空的。
而且ajax返回的data类型是什么，通常不转换JSON吗，看你的用解构的用法是把他编程Object类型？
那你不转换JSON不报错才怪。

#3

接口那边返回来的数据时json_encode的数据, 这边需要eval一下

#4

eval转换成JSON对象以后 返回给state里没问题，报的什么错，ajax首屏数据也渲染不到？

#5

我就是从ajax取出来之后,不会传递到render 中,修改setState说不是一个function,下面直接用dtarray会说undefined,然后是不是需要在getInitialState中写过的才能setState呀

#6

一个三条的数据可以传递,那个数据时1200多条,是不是因为数据量太大也不能及时传递?

#7

对,还有就是下边有个事件传递的pubsub方法,里面也需要用到ajax请求过来的数据, 抱歉我太新手了,谢谢

#8

如果说不是function是因为this根本没传对， 下面直接用dtarray当然没法用，你的if判断要放在回调里去，更数据量也没关系，是你的setState根本没执行，state没更新，自然也渲染不到数据

#9

而且不应该用this.state.dtarray?为何还要去定义一个全局变量。。。? 解决了this指向问题，这个问题就解决了

#10 
var Main = React.createClass({
    getInitialState:function(){
      return {
          listArr:this.props.listArr,
          Length:this.props.length,
          dtarray:this.props.dtarray,
          loadingData:[]  
      }
    },
    componentWillMount:function(){
		

    },
	componentDidMount:function(){

		$.ajax({ 		        
	      url: 'api/newsapi.php',
	      data:{
	          'oper':'banner',
	          'terms':terms
	           },
	      type: "post", 		       
	      success: function (data) 
	      {  
	        data = eval('('+data+')');
			console.info(data);
				this.setState({loadingData:data});
	      }.bind(this)
	    });
	},
    render:function(){
    		
      return(
          <div>
                <Image data={this.state.loadingData}/>
                <NavBar listArr={this.state.listArr}/>
                <Content dtarray = {this.state.dtarray} Length={this.state.Length}/>
                <AddMore />
                <HomeButton />
          </div>
      )
    }
});

对,大神,你看,向我这样传数据给image标签,在image标签中打印this.props.data;
会打印两次(为什么打印两次我也不知道…) 第一次为空

第二次才有数据

那我要在image标签中去处理传过来的数据要怎么弄呢

#11

执行两次是因为,你是先渲染了React组件,执行了一次DidMount生命周期后传递了新的props给Image，前一次是没有数据的当然是空的- -正常处理就行，如果嫌第一次是空的 可以在首次渲染之前传递默认数据。

#12

好的,多谢,再请教下
<div className="swiper-slide" style={{backgroundImage:'url({item.imgurl})'}}>
item是个对象,我想把图片路径传进去,怎么写才能识别
现在是这样的
The requested URL /news/{item.imgurl} was not found on this server.
我实际要传的是一个绝对路径
“http://www.zq12369.com/cms/resource/img/article/1478742520.png”
也就是item.imgurl

#13

大兄弟= =，style里 url是一整个字符串，你用字符串拼接的方式就可以了，如果引入了ES6直接用字符串模板就行，如果没有，直接用+来拼接

#14

用+号拼了报错…

#15

报错就是你没拼对- -

style={{ backgroundImage: 'url('+item.imgurl+')' }}

这么写

#16

厉害. :grin: 大神可否加下qq…