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

【问题标题】：how to have set state for sibling component in React without updating如何在不更新的情况下为 React 中的兄弟组件设置状态
【发布时间】：2020-04-09 08:21:54
【问题描述】：

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

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

【问题讨论】：

您能否详细介绍一下地图如何在不重新渲染的情况下“显示坐标”？
你可以使用像 Redux 这样的第三方存储就可以了。但一个好主意是让每个组件保持独立。
@JamieDixon 抱歉，我的解释不太清楚。我的意思是当输入设置坐标状态时，地图会移动到新坐标，但是当它发生时，就像地图被刷新（就像你在浏览器中按 F5 一样）。另一方面，如果我将坐标状态和输入组件移动到地图组件内部，则不会发生这种刷新并且它工作正常，但我认为它的结构不好（地图中的输入）。
@Md.AbuSayed 我实际上想知道如果我使用 Redux 或 Context API，我会避免这个问题。如果我选择其中之一，我想我会选择 Context。会有帮助吗？顺便说一句，我并不清楚保持组件独立是什么意思。你的意思是，在这种情况下，在 Map 组件中有 Input，这将成为“SearchMap”组件？
@김민겸 能否在您的问题中包含 Map 的代码？

标签： reactjs react-state-management react-state

【解决方案1】：

试试这个，我将 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>
  );
}

【讨论】：