Javascript 在通过标记数组进行映射之前进行检查

你好，我正试图通过一系列标记进行映射，但第一个对象是空的。如何在JSX中进行Nullcheck，以便地图上只显示非空的标记。 该函数位于

常量GettingStartedGoogleMap

中

const GettingStartedGoogleMap = withGoogleMap(props =>(
    <GoogleMap
      defaultZoom={13}
      center={props.center}
      >
      {if(props.markers !== undefined && props.markers != null && props.markers.length > 0)
        {props.markers.map(marker => (
          <InfoWindow  position={{ lat: marker.latitude, lng: marker.longitude }}
          key={marker.id}>
              <div>
              {marker.price}
              </div>
          </InfoWindow>
        ))}
      }
</GoogleMap>
));

export class AppMap extends Component {

 constructor(props) {
   super(props);
   this.Ref = firebase.database().ref().child('app').child('cards');
   this.state = ({
     markers : [{
       latitude: "",
       longitude: "",
       price: "",
       id: ""
     }]
   })
 }

 componentWillUpdate (){
   const previousMarker = this.state.markers;
   this.Ref.orderByChild('address').equalTo(this.props.city)
      .on('child_added', snap => {
      previousMarker.push({
        latitude: snap.node_.children_.root_.right.left.value.children_.root_.left.value.value_,
        longitude: snap.node_.children_.root_.right.left.value.children_.root_.value.value_,
        price: snap.node_.children_.root_.value.value_,
        key: snap.key + "_Marker",

        })

        console.log(previousMarker)

      })
 }


     render() {
         return (
             <div style={{height: `400px`}}>
                 <GettingStartedGoogleMap
                 containerElement={
                <div style={{ height: `100%` }} />
              }
              mapElement={
                <div style={{ height: `100%` }} />
              }

              center={this.props.center}
              markers={this.state.markers}

              googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
              />
            </div>
         );
     }
   }

const GettingStartedGoogleMap=withGoogleMap（道具=>(
{if（props.markers！==未定义和&props.markers！=null和&props.markers.length>0）
{props.markers.map（marker=>(
{marker.price}
))}
}
));
导出类AppMap扩展组件{
建造师（道具）{
超级（道具）；
this.Ref=firebase.database（）.Ref（）.child（'app'）.child（'cards'）；
此.state=({
标记：[{
纬度：“，
经度：“，
价格：“，
id:“
}]
})
}
组件将更新（）{
const previousMarker=this.state.markers；
this.Ref.orderByChild（'address'）.equalTo（this.props.city）
.on（'child_added'，snap=>{
前推({
纬度：snap.node\u0.children\u0.root\u0.right.left.value.children\u0.root\u0.left.value\u0，
经度：snap.node\u0.children\u0.root\u0.right.left.value.children\u0.root\u0.value.value\u0，
价格：snap.node\子节点\根节点\值值\值，
键：snap.key+“_标记”，
})
console.log（上一个标记）
})
}
render（）{
返回(
);
}
}

您可以使用

&&

操作符检查

const GettingStartedGoogleMap=withGoogleMap（道具=>(
{
props.markers&&props.markers.map（marker=>{
返回标记&&(
{marker.price}
)
})
}
));

const GettingStartedGoogleMap = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={13}
        center={props.center}
    >
        {
            props.markers && props.markers.map(marker => {
                return marker && (
                    <InfoWindow position={{ lat: marker.latitude, lng: marker.longitude }}
                        key={marker.id}>
                        <div>
                            {marker.price}
                        </div>
                    </InfoWindow>
                )
            })
        }
    </GoogleMap>
));