为什么Appbase在返回正确的项目之前返回'undefined'？ [英] Why does Appbase return 'undefined' before returning the correct item?

问题描述

我正在玩AppBase.io作为数据库，我不明白为什么这个组件在获得一个项目后呈现两次？似乎AppBase数据库首先返回 undefined ，然后返回正确的项。有人知道为什么吗？查看示例，我得到2个日志。

I am playing around with AppBase.io as a database and I don't understand why this component renders twice after getting an item? It seems as if the AppBase "database" returns undefined first and the correct item afterwards. Does anybody know why? Check out the example, where I get 2 logs.

在这个组件中，我需要从数据库中获取一个项目并进行渲染（没什么特别的。）

In this component I need to get an item from the database and render it (nothing special).

感谢您的解释。

var appbaseRef = new Appbase({
  url: "https://JHtFTzy4H:[e-mail]",
  app: "winwin"
});


class ItemFull extends React.Component {
  constructor() {
    super();
    this.state = {
      item: ''
    }
  }

  componentWillMount() {
    appbaseRef.get({
      type: "items",
      id: 'AWI5K7Q-5Q83Zq9GZnED'
    }).on('data', (response) => {
      this.setState({
        item: response
      });

    }).on('error', function(error) {
      console.log(error)
    })
  }

  render() {
    console.log(this.state.item._id, '<-- console_log');
    return (<div></div>);
  }
}

ReactDOM.render(<ItemFull /> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/appbase-js/2.2.11/appbase.js"></script>
<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="root"></div>

推荐答案

事实并非如此。你在 componentWillMount 中启动的异步调用不会阻止渲染过程（这很好），所以 render 是在调用完成之前调用，所以 this.state.item._id 是 undefined ，因为在那时， this.state.item 是''（你在构造函数中设置的值）。

It doesn't. The asynchronous call you start in componentWillMount doesn't hold up the rendering process (which is good), so render is called before the call completes, so this.state.item._id is undefined because at that point, this.state.item is '' (the value you set in your constructor).

这是完全正常的，只需确保以适当的方式呈现组件，因为它还没有信息，例如：

This is perfectly normal, just ensure that you render the component in an appropriate way for when it doesn't have the information yet, e.g.:

var appbaseRef = new Appbase({
  url: "https://JHtFTzy4H:[e-mail]",
  app: "winwin"
});


class ItemFull extends React.Component {
  constructor() {
    super();
    this.state = {
      item: ''
    }
  }

  componentWillMount() {
    appbaseRef.get({
      type: "items",
      id: 'AWI5K7Q-5Q83Zq9GZnED'
    }).on('data', (response) => {
      this.setState({
        item: response
      });

    }).on('error', function(error) {
      console.log(error)
    })
  }


  render() {
    return <div>{this.state.item._id ? this.state.item._id : "loading..."}</div>;
  }
}



ReactDOM.render(<ItemFull />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/appbase-js/2.2.11/appbase.js"></script>
<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="root"></div>

如果在获得该信息之前根本不应该呈现该组件，那么您'在错误的地方要求它。 :-)你在父组件中请求它，只有当你有信息（传递 props 中的信息）时才渲染这个组件，如下所示：

If the component shouldn't be rendered at all before you have that information, then you're requesting it in the wrong place. :-) You'd request it in the parent component and only render this component when you have the information (passing the information in props), something like this:

var appbaseRef = new Appbase({
  url: "https://JHtFTzy4H:[e-mail]",
  app: "winwin"
});

class ParentComponent extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {item: null};
  }
  
  componentWillMount() {
    appbaseRef.get({
      type: "items",
      id: 'AWI5K7Q-5Q83Zq9GZnED'
    }).on('data', (response) => {
      this.setState({
        item: response
      });
    }).on('error', function(error) {
      console.log(error)
    })
  }
  
  render() {
    return this.state.item ? <ItemFull item={this.state.item} /> : <div>loading...</div>;
  }
}

class ItemFull extends React.Component {

  render() {
    return <div>{this.props.item._id}</div>;
  }
}

ReactDOM.render( <ParentComponent /> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/appbase-js/2.2.11/appbase.js"></script>
<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="root"></div>

这篇关于为什么Appbase在返回正确的项目之前返回'undefined'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！