2017-03-06 99 views
1

我试图编写简单的ajax加载程序,我想知道我可以防止props.children呈现在父容器中。问题在于,无论Loader是否要显示它,以及渲染是否基于ajax数据来填充错误,都需要渲染。反应阻止儿童渲染(ajax加载器等待响应)

实施例:https://jsfiddle.net/j8dvsq39/

例2: 这个例子将产生错误病程this.state.data.user被AJAX请求之前未定义。

装载机:用装载机

import React from 'react' 
export default React.createClass({ 

    getDefaultProps() { 
     return { text: "Loading", loaded: false }; 
    }, 

    render() { 

     if(this.props.loaded == false) 
      return <div>{this.props.text}</div>; 
     else 
      return <div>{this.props.children}</div>; 
    } 
}) 

import React from 'react' 
import Loader from '../helpers/Loader'; 
import {comm} from '../Comm'; 

export default React.createClass({ 

    getInitialState() { 
     return {loaded: false, data: null}; 
    }, 
    componentWillMount(){ 
     comm.get("/xxx/xxx", {json: 1}, (back) => { 
      console.log(back); 
      this.setState({loaded: true, data: back}); 
     }); 
    }, 
    render(){ 
     return <Loader loaded={this.state.loaded}>{this.state.data.user.name}</Loader> 
}); 

回答

0

原因是,首先你定义data=null和AJAX调用之前您使用this.state.data.user.name,它会抛出错误:

Cannot read property 'name' of undefined

简单的解决方案是你需要把检查数据联合国直到你没有得到Ajax响应,选中此:

var Loader = React.createClass({ 
 
    getDefaultProps() { 
 
     return { text: "Loading", loaded: false }; 
 
    }, 
 
    render() { 
 
     if(this.props.loaded == false) 
 
      return <div>{this.props.text}</div>; 
 
     else 
 
      return <div>{this.props.children}</div>; 
 
    } 
 
}); 
 

 
var Hello = React.createClass({ 
 
    getInitialState() { 
 
     return {loaded: false, data: null}; 
 
    }, 
 
    componentWillMount(){ 
 
     setTimeout(()=>{ 
 
      this.setState({loaded: true, data: {user:{name: "login"}}}); 
 
     }, 1000); 
 
    }, 
 

 
    render: function() { 
 
    var user = null; 
 
    return <Loader loaded={this.state.loaded}> 
 
       <div> 
 
       Hello {this.state.data ? this.state.data.user.name : null} 
 
       </div> 
 
      </Loader>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Hello name="World" />, 
 
    document.getElementById('container') 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='container'/>

+0

THX的答案。但我知道我可以检查变量,我只是不想这样做。我想干净的代码“数据收集后”我知道我可以让这个类与ifs一起工作,我只是想知道,我可以阻止他们在装载机。 – rzseattle