Reactjs 停止反应谷歌自动完成<；输入>；组件重新渲染，但在选择时渲染所有其他内容

在React中，当我从AutoComplete中选择任何内容时，它将重新呈现

输入

元素，如何阻止它仅重新呈现

输入

元素，而重新呈现其他所有内容

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

要使用shouldComponentUpdate（），请执行以下操作：要么我使用不正确，要么其他操作不起作用：

并将自动完成组件与类组件分开放置，如下所示：

正在此处运行的演示：

来自：

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

这就是在示例中重新呈现子组件的原因

通过以下方式组织

Map

组件，可以防止

GoogleMap

和

Autocomplete

组件重新渲染：

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%` }} />}
    />
  );
}

函数应用程序（）{
常量AsyncMap=withScriptjs(
使用谷歌地图（mapProps=>{
返回(
);
})
);
返回(
将state关键字更改为您的姓名或其他名称您在您的状态中设置的数据不必处于您的状态，最好不要处于状态以获得更好的性能。我猜如果您将autocomplete组件与AsyncMap分离，您的问题将得到解决。您如何知道通过分离它可以解决问题？
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>
    );
  }
}