反應：setState導致應用程序崩潰

Question

我是新來的React和學習的目的，現在創建一些應用程序，應該顯示城市或反應谷歌地圖的任何地址。問題是我不知道如何溝通這些數據，我正在使用axios工具。

所以這裏是一個鏈接 - pastebin。這是一個代碼片段，但我用評論分隔每個文件。我正在使用一些EventEmitter腳本來傳遞數據。問題是，當我在google-map js文件中設置狀態時，它會無休止地啓動到console.log，不會重新呈現並導致選項卡崩潰。

問題解決。希望它可以幫助其他人。更改代碼：

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     loc: {lat: undefined, lng: undefined} 
    } 
    } 

    componentDidMount() { 
    EventEmitter.subscribe('locationChanged', (data) => { 
     this.setState({loc: data}); 
    }); 
    } 

    render() { 
    const {lat, lng} = this.state.loc; 
    var city = []; 
    var key = lng + "" + lat; 
    city.push(<GoogleMapComponent key={key} lat={lat} lng={lng} />); 
    return (
     <div> 
      <SearchBar /> 
      {city} 
     </div> 
    ); 
    } 
} 

而且google_map組件我做了無狀態：

import React from 'react'; 
import {GoogleMapLoader, GoogleMap} from "react-google-maps"; 

export default (props) => { 
    if(props.lat === undefined) { 
     return <div> &nbsp; </div>; 
    }; 

    console.log(props.lat, props.lng); 

    return (
    <GoogleMapLoader 
     containerElement = { <div style={{ height: '60%' }} /> } 
     googleMapElement = { 
     <GoogleMap defaultZoom = {12} defaultCenter = {{ lat: props.lat, lng: props.lng }} /> 
     } 
    /> 
); 
} 

Answer 1

的問題是，你訂閱的事件發射的render功能，只要您設置狀態，這被調用裏面，重新訂閱，其中設置狀態和調用渲染重新訂閱和設置狀態.....

將此邏輯上移到componentDidMount，它將只訂閱一次。

class GoogleMapComponent extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     loc: {lat: 50, lng: 40} 
    } 
    } 

    componentDidMount() { 
    EventEmitter.subscribe('locationChanged', (data) => { 
     this.setState({loc: data}); 
    }); 
    } 

    render() { .. } 
}