为什么Appbase在返回正确的项目之前会返回“ undefined”？

小编典典

为什么Appbase在返回正确的项目之前会返回“ undefined”？

reactjs

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

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

感谢您的解释。

var appbaseRef = new Appbase({

  url: "https://JHtFTzy4H:[email protected]",

  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>

阅读 228

2020-07-22

共1个答案

小编典典

没有。您在开始异步调用componentWillMount不托起渲染过程（这是好的），所以render在调用完成之前调用，因此this.state.item._id是undefined因为在这一点上，this.state.item是''（你在构造函数中设置的值）。

这完全正常，只需确保在尚无信息的情况下以适当的方式呈现组件即可，例如：

var appbaseRef = new Appbase({

  url: "https://JHtFTzy4H:[email protected]",

  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）时才呈现此组件，如下所示：

var appbaseRef = new Appbase({

  url: "https://JHtFTzy4H:[email protected]",

  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>

2020-07-22