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

React：setState导致应用程序崩溃

1 个答案: