Reactjs react google maps StandaloneSearchBox卸载

我正在尝试使用来自的StandaloneSearchBox组件

在查看和其他一些答案后，我实现了如下组件：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withScriptjs } from "react-google-maps";
import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";
import { Input } from "semantic-ui-react";
import API_KEY from "../config/googleAPIkey";

class AddressSearchbox extends Component {
  constructor(props) {
    super(props);
    this.searchboxRef = null;
  }

  onSearchBoxMounted = ref => {
    this.searchboxRef = ref;
  };

  onPlacesChanged = () => {
    const places = this.searchboxRef.getPlaces();
    this.props.onPlaceSelect(places[0]);
  };

  render() {

    const Searchbox = withScriptjs(props => (
      <StandaloneSearchBox
        ref={props.onSearchBoxMounted}
        onPlacesChanged={props.onPlacesChanged}
      >
        <Input
          type="text"
          placeholder="Type address or google place name"
          icon="search"
        />
      </StandaloneSearchBox>
    ));

    return (
      <Searchbox
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        onPlacesChanged={this.onPlacesChanged}
        onSearchBoxMounted={this.onSearchBoxMounted}
      />
    );
  }
}

AddressSearchbox.propTypes = {
  onPlaceSelect: PropTypes.func.isRequired
};

export default AddressSearchbox;

imports ...

const Searchbox = withScriptjs(props => (....))

class AddressSearchbox extends Component {
  ...
  render() {
    return (
      <Searchbox .../>
    );
  }
}

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“react google maps”导入{withScriptjs}；
从“react google maps/lib/components/places/StandaloneSearchBox”导入StandaloneSearchBox；
从“语义ui反应”导入{Input}；
从“./config/googleAPIkey”导入API_密钥；
类AddressSearchbox扩展组件{
建造师（道具）{
超级（道具）；
this.searchboxRef=null；
}
onSearchBoxMounted=ref=>{
this.searchboxRef=ref；
};
onPlacesChanged=（）=>{
const places=this.searchboxRef.getPlaces（）；
this.props.onPlaceSelect（places[0]）；
};
render（）{
const Searchbox=withScriptjs（props=>(
));
返回(
);
}
}
AddressSearchbox.propTypes={
onPlaceSelect:PropTypes.func.isRequired
};
导出默认地址搜索框；

我在注册表单中使用该组件，其中所有其他输入字段在输入更改时更新状态，从而导致整个表单的重新呈现。 当AddressSearchbox组件被重新呈现时，它似乎被卸载，然后重新装载导致闪烁。组件本身工作正常

---

编辑：在记录onSearchBoxMounted（）中传入的ref参数时，每次重新渲染后都会打印null，然后是SearchBox对象，因此根据SearchBox组件的卸载情况，我不确定它是否仍然是实际的，但要解决此问题，需要在类定义之前从

render

函数中提取此部分：

const Searchbox = withScriptjs(props => (....))

所以它看起来是这样的：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withScriptjs } from "react-google-maps";
import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";
import { Input } from "semantic-ui-react";
import API_KEY from "../config/googleAPIkey";

class AddressSearchbox extends Component {
  constructor(props) {
    super(props);
    this.searchboxRef = null;
  }

  onSearchBoxMounted = ref => {
    this.searchboxRef = ref;
  };

  onPlacesChanged = () => {
    const places = this.searchboxRef.getPlaces();
    this.props.onPlaceSelect(places[0]);
  };

  render() {

    const Searchbox = withScriptjs(props => (
      <StandaloneSearchBox
        ref={props.onSearchBoxMounted}
        onPlacesChanged={props.onPlacesChanged}
      >
        <Input
          type="text"
          placeholder="Type address or google place name"
          icon="search"
        />
      </StandaloneSearchBox>
    ));

    return (
      <Searchbox
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        onPlacesChanged={this.onPlacesChanged}
        onSearchBoxMounted={this.onSearchBoxMounted}
      />
    );
  }
}

AddressSearchbox.propTypes = {
  onPlaceSelect: PropTypes.func.isRequired
};

export default AddressSearchbox;

imports ...

const Searchbox = withScriptjs(props => (....))

class AddressSearchbox extends Component {
  ...
  render() {
    return (
      <Searchbox .../>
    );
  }
}

导入。。。
const Searchbox=withScriptjs（props=>（..）
类AddressSearchbox扩展组件{
...
render（）{
返回(
);
}
}

实际上，大多数React应用程序只调用ReactDOM.render（）一次。
资料来源：

您会看到这种闪烁，因为ReactJS在每次状态更改时都会运行render（）函数