反应：setState 导致应用程序崩溃

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() { .. }
}