Состояние компонента в реактиве

Question

Прежде всего, я новичок в ReactJS. Я хотел бы отображать маркеры в моем MapComponent. Я сделал эту работу, но, честно говоря, я думаю, что должен быть лучший способ сделать это ... Я получаю реквизиты из моего родительского компонента, где они загружаются из JSON. Я хотел бы передать координаты из каждого элемента (из моего JSON) в маркеры в состоянии в моем MapComponent. Я использовал решение google-maps для карт 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. Эти функции принимают 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; 
    } 
}