停止React Google AutoComplete 组件重新渲染，但在选择时渲染其他所有内容

Question

在React中，当我从“自动完成”中选择任何内容时，它重新渲染了Input元素，如何阻止它重新渲染仅Input的元素，但重新渲染其他所有元素？

到目前为止，我已经尝试过：

1. 要使用shouldComponentUpdate（），但我使用不正确或其他不起作用：How to stop the google map from re rendering and keeping just the values in input fields when marker is placed on different locations?

2. 并按照此处的建议将AutoComplete组件与Class组件分开放置：https://github.com/tomchentw/react-google-maps/issues/220

演示在这里运行：https://codesandbox.io/s/suspicious-ride-5ht4o

Answer 1

来自shouldComponentUpdate(nextProps, nextState) documentation：

请注意，返回false不会阻止子组件状态更改时重新渲染。

这就是在您的示例中重新渲染shouldComponentUpdate(nextProps, nextState)子组件的原因。

您可以通过以下方式组织AutoCompleteTest组件来防止GoogleMap和Autocomplete组件重新呈现：

Map

where

function App() {
  const AsyncMap = withScriptjs(
    withGoogleMap(mapProps => {
      return (
        <div>
          <Map
            defaultZoom={15}
            defaultCenter={{ lat: 55.686757, lng: 21.157926 }}
          />
        </div>
      );
    })
  );

  return (
    <AsyncMap
      googleMapURL={MAPS_URL}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: "200px" }} />}
      mapElement={<div style={{ height: `100%` }} />}
    />
  );
}

注意：

• [

  class Map extends Component {
    constructor(props) {
      super(props);
      this.state = {
        currentPosition: props.defaultCenter
      };
      this.handlePlaceSelected = this.handlePlaceSelected.bind(this);
    }
  
    handlePlaceSelected(place, input) {
      this.setState({
        currentPosition: {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng()
        }
      });
    }
  
    render() {
      return (
        <div>
          <GoogleMap
            defaultZoom={this.props.defaultZoom}
            defaultCenter={this.state.currentPosition}
            center={this.state.currentPosition}
          >
            <Marker position={this.state.currentPosition} />
          </GoogleMap>
          <Autocomplete
            style={{
              width: "90%",
              height: "40px",
              marginTop: "10px"
            }}
            onPlaceSelected={this.handlePlaceSelected}
            types={[]}
          />
        </div>
      );
    }
  }

  需要与center组件的defaultCenter属性一起明确指定，以更新地图中心

GoogleMap