как установить состояние для одноуровневого компонента в React без обновления - PullRequest
Новая
       59

как установить состояние для одноуровневого компонента в React без обновления

0 голосов
/ 09 апреля 2020

У меня есть 2 родственных компонента в 1 родительском компоненте. Это так: 

import React, { useState } from 'react';
import PlaceSearchInput from './PlaceSearchInput';
import { GoogleMap, withGoogleMap } from "react-google-maps";

export default function Search(props) {
    const [mapCenter, setMapCenter] = useState({lat:3, lng:2});

    function Map() {

        return (
            <div>
            <GoogleMap defaultZoom={10} center={mapCenter}/>
            </div>
        )
    }

    const WrappedMap = withGoogleMap(Map);

    if (!props.isGoogleMapApiReady)
        return (
            <div>Loading...</div>
        )

    return (
        <div style={{ margin: "100px" }}>
           <div style={{ height: "50vh", width: "50vh" }}>
                <WrappedMap
                    loadingElement={<div style={{ height: "100%" }} />}
                    containerElement={<div id="map" style={{ height: "100%" }} />}
                    mapElement={<div style={{ height: "100%" }} />}
                />
                <PlaceSearchInput setMapCenter={setMapCenter} />
            </div>
        </div>
    )
}

Я хочу, чтобы Ввод установил координаты, а Карта показывает координаты. Я знаю, что один из способов состоит в том, чтобы иметь координаты в родительском состоянии, а затем передать функцию set в Input, координаты в Map. Но таким образом я обнаружил это всякий раз, когда состояние изменяется компонентом Input, хотя Map действительно перемещается в новые координаты, Map обновляется, и это то, чего я хочу избежать. Есть ли способ решить это?

1 Ответ

2 голосов
/ 09 апреля 2020

Попробуйте, я переместил создание Map и WrappedMap из компонента Search. Я полагаю, что изменение в определении компонента каждый раз, когда компонент перерисовывается, вероятно, заставляло реагировать на мысль, что это совершенно новый компонент и демонтировать старый и монтировать новый, а не перерисовывать. 

import React, { useState } from 'react';
import PlaceSearchInput from './PlaceSearchInput';
import { GoogleMap, withGoogleMap } from 'react-google-maps';

function Map({ center }) {
  return (
    <div>
      <GoogleMap defaultZoom={10} center={center} />
    </div>
  );
}

const WrappedMap = withGoogleMap(Map);

export default function Search(props) {
  const [mapCenter, setMapCenter] = useState({ lat: 3, lng: 2 });

  if (!props.isGoogleMapApiReady) {
    return <div>Loading...</div>;
  }
  return (
    <div style={{ margin: '100px' }}>
      <div style={{ height: '50vh', width: '50vh' }}>
        <WrappedMap
          loadingElement={<div style={{ height: '100%' }} />}
          containerElement={<div id="map" style={{ height: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
          center={mapCenter}
        />
        <PlaceSearchInput setMapCenter={setMapCenter} />
      </div>
    </div>
  );
}
...