ReactJSのコンポーネントの状態

Question

まず、ReactJSの新機能です。 MapComponentにマーカーを表示したいと思います。私はこの仕事をしましたが、正直言ってそれを行うより良い方法があるはずです... 親コンポーネントから小道具を入手し、そこからJSONからロードされます。各項目（JSONから）の座標をMapComponentの状態のマーカーに渡したいと思います。私はGoogleマップの反応Googleマップソリューションを使用しました。 誰かが私にこのケースで最善のアプローチとなるアドバイスをくれたかもしれませんか？任意のヒントありがとう！あなたが小道具を経由して、あなたの状態を渡しているので

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

、あなたはコンポーネントクラスを作成する卵形することができ、あなたが実際に単純な具象コンポーネントを必要とし、それは（私は推測）0.14以降でサポートされています。このの表現コンポーネントは、関数であり、render関数を表しています。この機能は、あなたがコンポーネントよりきれいになります

のparam

として propsを取る：

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

まず、@webdebが言ったように、より良い小道具を使用して、正しいデータを送信します。状態を使用すると、不要なコンポーネントの再描画が発生します。 componentDidUpdate方法は、この目的に適していない、あなたが説明するように、あなたが小道具や状態を処理する必要がありますいくつかの理由であれば第二に、あなたのようなcomponentWillReceiveProps

何かに置き換える必要があります：あなたは

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; 
    } 
}