在渲染之前在服务器中反应获取数据 [英] React fetch data in server before render

问题描述

我是 reactjs 的新手，我想在服务器中获取数据，以便它将带有数据的页面发送到客户端.

当函数 getDefaultProps 返回这样的虚拟数据 {data: {books: [{..}, {..}]}} 时是可以的.

但是不适用于下面的代码.代码按此顺序执行，并显示错误消息无法读取未定义的属性 'books'"

1. getDefaultProps
2. 返回
3. 获取
4. {data: {books: [{..}, {..}]}}

但是，我希望代码应该按此顺序运行

1. getDefaultProps
2. 获取
3. {data: {books: [{..}, {..}]}}
4. 返回

有什么想法吗?

静态:{fetchData:函数(回调){var me = this;superagent.get('http://localhost:3100/api/books').accept('json').end(function(err, res){如果(错误)抛出错误；var data = {data: {books: res.body} }console.log('fetch');回调(数据)；});}getDefaultProps:函数(){console.log('getDefaultProps');var me = this;me.data = '';this.fetchData(函数(数据){console.log('回调');控制台日志(数据)；me.data = 数据；});console.log('return');返回 me.data;},渲染:函数(){console.log('渲染书单');返回 (<div><ul>{this.props.data.books.map(function(book) {return 
{book.name}
})}

);}

解决方案

您正在寻找的是 componentWillMount.

来自文档:

<块引用>

在客户端和服务器上调用一次，紧接在发生初始渲染.如果您在此方法中调用 setState，render() 将看到更新的状态，并且只会执行一次尽管状态发生了变化.

所以你会做这样的事情:

componentWillMount : 函数 () {var data = this.getData();this.setState({数据: 数据});},

这样，render() 只会被调用一次，并且您将在初始渲染中获得您正在寻找的数据.

I'm new to reactjs, I want to fetch data in server, so that it will send page with data to client.

It is OK when the function getDefaultProps return dummy data like this {data: {books: [{..}, {..}]}}.

However not work with code below. The code execute in this sequence with error message "Cannot read property 'books' of undefined"

1. getDefaultProps
2. return
3. fetch
4. {data: {books: [{..}, {..}]}}

However, I expect the code should run in this sequence

1. getDefaultProps
2. fetch
3. {data: {books: [{..}, {..}]}}
4. return

Any Idea?

statics: {
    fetchData: function(callback) {
      var me = this;

      superagent.get('http://localhost:3100/api/books')
        .accept('json')
        .end(function(err, res){
          if (err) throw err;

          var data = {data: {books: res.body} }

          console.log('fetch');                  
          callback(data);  
        });
    }


getDefaultProps: function() {
    console.log('getDefaultProps');
    var me = this;
    me.data = '';

    this.fetchData(function(data){
        console.log('callback');
        console.log(data);
        me.data = data;      
      });

    console.log('return');
    return me.data;            
  },


  render: function() {
    console.log('render book-list');
    return (
      <div>
        <ul>
        {
          this.props.data.books.map(function(book) {
            return <li key={book.name}>{book.name}</li>
          })
        }
        </ul>
      </div>
    );
  }

解决方案

What you're looking for is componentWillMount.

From the documentation:

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

So you would do something like this:

componentWillMount : function () {
    var data = this.getData();
    this.setState({data : data});
},

This way, render() will only be called once, and you'll have the data you're looking for in the initial render.

这篇关于在渲染之前在服务器中反应获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！