是否可以仅在初始化道具时才渲染反应组件？答案

【问题标题】：Is it possible to render a react component only when a prop is initialized?是否可以仅在初始化道具时才渲染反应组件？
【发布时间】：2020-07-06 02:50:19
【问题描述】：

我正在尝试将道具 search 传递给我的 AddressList 组件。

<div className="addresses">
                {search && <AddressList onAddressSelect={addressSelectFunction}
                                       addresses={app.addresses}
                                       update={updateChild}
                                       searchRef={searchRef}
                                       search={search}
                                       searchCompleteHandler={searchCompleteHandler}/> }
            </div>

问题是，prop 在渲染过程中可能没有初始化。

useEffect(()=>{
    loadModules(["esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Search",
        "esri/tasks/Locator",
        "esri/geometry/Point",
        "esri/tasks/RouteTask",
        "esri/tasks/support/RouteParameters",
        "esri/tasks/support/FeatureSet",
        "esri/geometry/geometryEngine",
        "esri/geometry/support/webMercatorUtils"])
        .then(([Map, MapView, Graphic, GraphicsLayer, Search, Locator, Point, RouteTask, RouteParameters, FeatureSet, geometryEngine, webMercatorUtils]) => {
            //...initialize other stuff
            search = new Search({
                view: view,
                container: searchRef.current,
                sources: [
                    {
                        locator: new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
                        countryCode: "LTU",
                        name: "Custom Geocoding Service"
                    }
                ],
                includeDefaultSources: false
//....});

是否可以让子组件AddressList只在search初始化时才渲染？

【问题讨论】：

如果您将search 属性添加为useEffect 挂钩的依赖项，它只会在该属性初始化或更新时运行。
我不明白。我在这里发布的所有代码都来自 Map 组件。搜索变量应该像下面的代码一样被初始化，然后像上面的代码一样作为道具传递给 AddressList 组件。问题是，useEffect 和 loadModules 之前和之后的所有代码都在 useEffect 和 loadModules 之前执行。这就是搜索变量未初始化并传递 null 的原因。有没有办法让程序在渲染子组件之前等待 prop 初始化？

标签： reactjs components render arcgis react-functional-component

【解决方案1】：

您需要重新渲染组件。

const [loaded, setLoaded] = useState(false);
useEffect(()=>{
!loaded && loadModules(["esri/Map",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/layers/GraphicsLayer",
    "esri/widgets/Search",
    "esri/tasks/Locator",
    "esri/geometry/Point",
    "esri/tasks/RouteTask",
    "esri/tasks/support/RouteParameters",
    "esri/tasks/support/FeatureSet",
    "esri/geometry/geometryEngine",
    "esri/geometry/support/webMercatorUtils"])
    .then(([Map, MapView, Graphic, GraphicsLayer, Search, Locator, Point, RouteTask, RouteParameters, FeatureSet, geometryEngine, webMercatorUtils]) => {
        //...initialize other stuff
        search = new Search({
            view: view,
            container: searchRef.current,
            sources: [
                {
                    locator: new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
                    countryCode: "LTU",
                    name: "Custom Geocoding Service"
                }
            ],
            includeDefaultSources: false
            setLoaded(true)
//....});

【讨论】：

如果我重新渲染组件，地图也会重新渲染。在这种情况下，我无法重新渲染父组件
编辑了我的答案
很抱歉没有回复您。在投入大量工作试图让 arcgis 与 react 一起工作后，我放弃了并回到了普通的 javascript。这个问题可能太深了，无法在本网站上讨论。