如何在不更新的情况下为React中的兄弟组件设置状态

时间:2020-04-09 08:21:54

标签: reactjs react-state-management react-state

我在1个父级组件中有2个同级组件。就像这样:

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>
    )
}

我希望输入设置坐标,而Map显示坐标。我知道一种方法是在父级中具有坐标状态,然后将set函数传递给Input,将坐标传递给Map。但是通过这种方法,我可以在Input组件更改状态时发现它,尽管Map确实移到了新坐标,但是Map刷新了,这就是我要避免的事情。有办法解决吗?

1 个答案:

答案 0 :(得分:2)

尝试一下,我将Map和WrappedMap的创建移出了Search组件。 我相信,每次重新渲染组件时,组件定义的更改都可能引起人们的反应,以为它是一个全新的组件,请卸载旧的并安装新的组件,而不是重新渲染。

filterForElement