reactjs - react : setState causes app crash

Question

我是 React 的新手，出于学习目的，现在创建了一些应用程序，该应用程序应该使用 react-google-map 显示城市或任何地址。问题是我不确定如何传达这些数据，我正在使用 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() { .. }
}