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

Posted 2023-03-16

【中文标题】是否可以仅在初始化道具时才渲染反应组件？

【英文标题】：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 初始化？

【参考方案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。这个问题可能太深了，无法在本网站上讨论。