реакции-google-карты отключение StandaloneSearchBox

Question

Я пытаюсь использовать компонент StandaloneSearchBox из https://www.npmjs.com/package/react-google-maps

После просмотра документов и некоторых других ответов я реализовал компонент следующим образом:

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;

Я использую компонент в форме регистрации, где все остальные поля ввода обновляют состояние при изменении ввода, вызывая повторную визуализацию всей формы.Когда компонент AddressSearchbox подвергается повторной визуализации, кажется, что он отключен и затем перемонтируется, вызывая мерцание.Сам компонент работает нормально.

EDIT: при регистрации параметра ref, переданного в onSearchBoxMounting (), он печатает null, а затем объект SearchBox после каждого повторного рендеринга, поэтому в соответствии с this компонент SearchBox отключается

Answer 1

Я не уверен, что это все еще актуально, но чтобы исправить это, вам нужно извлечь эту часть из функции render до определения вашего класса:

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

Так это будет выглядеть так:

imports ...

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

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

На практике большинство приложений React вызывают ReactDOM.render () только один раз.
Источник: https://reactjs.org/docs/rendering-elements.html

Вы видите это мерцание, потому что ReactJS запускает функцию render () каждый раз, когда изменяется ваше состояние.