Question

我确定这一定是一个相当常见的问题，但我无法找到关于堆栈溢出的最新解决方案......在React / Meteor域内。我想查询mongoDB以提取一些信息，然后将其传递给我的react组件State。目前我正在使用父组件查询mongoldb并将其作为道具传递给子组件 - 但是当子组件呈现时，mongoDB调用尚未返回，因此我的道具未定义。

从各种来源看来，我需要实现对mongo的异步javascript调用，然后回调到状态。但是，我无法在野外找到任何这方面的例子。有没有人有这种模式？最后 - 如果我以错误的方式接近这一点，请跳进去。

任何建议表示赞赏！

export default class GooleMapComponent extends Component {
constructor(props){
  super(props)


this.state = {
  {position: {lat: this.props.mapParams.longitude, lng: this.props.mapParams.longitude},
  // this returns undefined a
   key: `goshi`,
   defaultAnimation: 2
 }

Answer 1

假设父组件正常工作，我有两种选择：

您可以让父组件在没有道具时不呈现子组件
您可以让子组件工作，但在没有正确道具的情况下显示“加载”状态

实现1：

在您的父组件上定义一个名为renderGoogleMapComponent(mapParams)的方法（顺便说一下，你有一个拼写错误，Goole）只有在定义了mapParams时才会呈现子项：

renderGoogleMapComponent(mapParams){
    if(mapParams != undefined){
        return <GoogleMapComponent mapParams={mapParams}/>
    }

然后在父组件调用的render中

renderGoogleMapComponent(whereverYouGetThoseMapParamsMaybe this.state.mapParams?)

以前你曾经拥有

<GoogleMapComponent mapParams={whereverYouGetThoseMapParamsMaybe this.state.mapParams?}/>

实现2：

在子组件的render方法中，检查是否获得了props：

render(){
    if(this.props.mapParams != undefined){
        //your render logic here
    } else {
       return <div>Loading map data</div>
    }

注意：没有必要在州内存放道具，真的为什么会这样？另外：在构造函数this.props中未定义，只需使用props

在1.您也可以让父组件执行“加载”显示，但这是一个不同的问题，您显然应该调整它以最好地为用户服务

如何从异步Mongo调用设置React State？

1 个答案: