Komponentenstatus in ReactJS

Question

Zunächst bin ich neu in ReactJS. Ich möchte Markierungen in meiner MapComponent anzeigen. Ich habe diese Arbeit gemacht, aber um ehrlich zu sein denke ich, es sollte einen besseren Weg geben, es zu tun ... Ich bekomme Requisiten von meiner Elternkomponente, wo sie von JSON geladen werden. Ich möchte Koordinaten von jedem Element (von meinem JSON) in Markierungen in meinem MapComponent übergeben. Ich habe react-google-maps-Lösung für Google Maps verwendet. Vielleicht könnte mir jemand einen Rat geben, was wäre in diesem Fall der beste Ansatz? Vielen Dank für irgendwelche Tipps!

export class MapComponent extends React.Component { 

    constructor(props) { 
    super(props) 
    this.state = { 
     markers: [] 
    } 
    } 


    getMarkers() { 
    if (this.props.data.rows) { 
     var markers = this.props.data.rows.map(function(item, i) { 
     return { 
      position: { 
      lat: item.coordinate[0], 
      lng: item.coordinate[1] 
      }, 
      item: item 
     } 
     }); 
     this.setState({ 
     markers: markers 
     }); 
    } 
    } 
    shouldComponentUpdate(nextProps, nextState) { 
    return true; 
    } 
    componentDidUpdate() { 
    this.getMarkers(); 
    } 

    render() { 
    return (
     <div className={styles.map}> 
     <GoogleMapLoader 
     containerElement={ 
      <div 
      {...this.props} 
      style={{ 
       height: "100%", 
      }} 
      /> 
     } 
     googleMapElement={ 
      <GoogleMap 
      ref={(map) => console.log(map)} 
      defaultZoom={9} 
      defaultCenter={{lat: 52.379189, lng: 4.899431}}> 
      {this.state.markers.map((marker, index) => { 
       return (
       <Marker 
       {...marker} 
       /> 
      ); 
      })} 
      </GoogleMap> 
     } 
     /> 
     </div> 
    ); 
    } 
} 

Answer 1

Da Sie Ihren Zustand über Requisiten sind vorbei, können Sie eine Komponentenklasse eiförmig Schaffung, die Sie tatsächlich benötigen nur eine einfache gegenständliche Komponente wird unterstützt, da 0,14 (glaube ich). Diese darstellenden Komponenten sind nur Funktionen, die die render Funktion darstellen. Diese Funktionen übernehmen props als param

So Component Sie mehr sauber aussehen:

const MapComponent = (props) => { 
    return (
    <div className={styles.map}> 
     <GoogleMapLoader 
     containerElement={ 
      <div 
      {...props} 
      style={{height: "100%"}} 
      /> 
     } 
     googleMapElement={ 
      <GoogleMap 
      ref={(map) => console.log(map)} 
      defaultZoom={9} 
      defaultCenter={{lat: 52.379189, lng: 4.899431}}> 
       {props.data.rows.map((item, index) => { 
       const position = { 
        lat: item.coordinate[0], 
        lng: item.coordinate[1] 
       }; 

       return (
        <Marker 
        key={index} 
        position={position} 
        item={item} 
        /> 
      ); 
      })} 
      </GoogleMap> 
     } 
     /> 
    </div>); 
} 

Answer 2

Zuerst wird, wie @webdeb sagte, besser die richtigen Daten unter Verwendung von Requisiten zu senden. Die Verwendung des Zustands verursacht ein unnötiges Neuzeichnen einer Komponente. Zweitens, wenn aus irgendeinem Grund müssen Sie die Requisiten und den Zustand behandeln, wie Sie beschreiben, componentDidUpdate Methode nicht für diesen Zweck geeignet ist, sollten Sie es mit componentWillReceiveProps

So etwas ersetzen:

import React, {Component} from 'react'; 
export class MapComponent extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      markers: [] 
    } 
    } 
    componentDidMount() { 
     this.getMarkers(this.props); 
    } 
    componentWillReceiveProps(nextProps){ 
     if(this.props.data!==nextProps.data){ 
      const markers = this.getMarkers(nextProps); 
      this.setState({ 
       markers: markers 
      }); 
     } 
    } 

    getMarkers(props) { 
     let markers = []; 
     if (props.data.rows) { 
      markers = props.data.rows.map(function(item, i) { 
       return { 
       position: { 
        lat: item.coordinate[0], 
        lng: item.coordinate[1] 
       }, 
       item: item 
       } 
      }); 

     } 
     return markers; 
    } 
}