ReactJS环通数据在异步调用

我：ReactJS环通数据在异步调用

var container = document.getElementById('container'); 

var App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <div className="col-xs-9 job-list"><JobList /></div> 
       <div className="col-xs-3"><RightPanel /></div> 
      </div> 
     ); 
    } 
}) 

var JobList = React.createClass({ 
    componentWillMount: function() { 
     this.setState({ 
      jobs: [] 
     }); 
     this.load(); 
    }, 
    load: function() { 
     var self = this; 
     qwest.get('jobs/list', null, {responseType: 'json'}) 
      .then(function (response) { 
       var x = 0; 
       var jobs_array = []; 
       for (var i in response) { 
        jobs_array.push(<Job key={x} job={response[i]}/>); 
        x++; 
       } 
       self.setState({jobs: jobs_array}); 
      }) 

    }, 
    render: function() { 
     return (
      <div> 
       {this.state.jobs} 
      </div> 
     ); 
    } 
}) 

var Job = React.createClass({ 
     render: function() { 
      return (
       <div className="job"> 
        <div className="job-header"> 
         {this.props.job.id} 
         <span className="pull-right"><abbr title={this.props.job.dateCreated}>{this.props.job.age}</abbr></span> 
        </div> 
        <div className="job-body"> 

        </div> 
        <div className="job-footer"></div> 
       </div> 
      ) 
     } 
    } 
);

奎斯特简直是$阿贾克斯的包装。

这是输出我的组件的最佳方式吗？我不得不把循环放回到ajax的回调中，因为在调用渲染函数之前调用通常会结束，所以我最终没有渲染任何东西。

来源

2016-04-07 imperium2335

如果您只打算一次运行加载操作，则几乎可以接受。问题是，如果您稍后再次加载以使用新数据进行更新，您会得到奇怪的结果。关键字应该用来自数据的唯一标识组件实例.React使用它们以后不必重新创建组件，只要它们切换位置即可。您可以通过密钥here了解有关对帐流程的更多信息。

我在您的Job组件中看到您收到的工作有一个ID。假设它是唯一的，那么使用它作为关键字会更好，因为即使您开始使组件更具动态性，它也能可靠地工作。

除此之外，您可以使用响应数组上的cool map函数将它们映射到您的组件，而不必使用将事物推入数组的循环。

最终的结果是这样的：

qwest.get('jobs/list', null, {responseType: 'json'}) 
    .then(function (response) { 
     var jobs = response.map(function(job) { 
      return (<Job key={job.id} job={job} />); 
     }); 
     self.setState({jobs: jobs}); 
    });

或者使用ES6 /巴贝尔箭头功能（可以让你摆脱这种结合自己）：

qwest.get('jobs/list', null, {responseType: 'json'}) 
    .then(response => { 
     this.setState({ 
      jobs: response.map(job => <Job key={job.id} job={job} />) 
     }); 
    });

另一点：您应该在组件中使用getInitialState: function() {return yourInitialState;}来设置默认状态，而不是将其设置为componentWillMount。然后，您可以将componentWillMount更改为componentDidMount，以在初始渲染完成后开始加载（并以此方式提高渲染性能）。

来源

2016-04-07 12:43:28 Ambroos

ReactJS环通数据在异步调用

回答

相关问题