Можно ли визуализировать компонент реакции только при инициализации реквизита? - PullRequest
Новая
       15

Можно ли визуализировать компонент реакции только при инициализации реквизита?

0 голосов
/ 25 марта 2020

Я пытаюсь передать реквизит search моему компоненту AddressList. 

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

Проблема в том, что реквизит, вероятно, не инициализируется во время рендеринга. 

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 ?

1 Ответ

0 голосов
/ 25 марта 2020

Вам необходимо повторно обработать компонент. 

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)
//....});
...