arunoda / react-komposer

Feed data into React components by composing containers.
MIT License
732 stars 70 forks source link

Component Did Mount did not fired #164

Closed xshadowlegendx closed 6 years ago

xshadowlegendx commented 7 years ago

I'm using MeteorReact, doing project involving google map, the component did mount did fired in the web but building it to android breaks the component did mount, which my map initialization is in the component, result in showing white screen rather than map. There might be two reason to this as i could think of, which First is problem coming from Cordova, second is coming from react-komposer. Here is the code: ` import React from 'react'; import { Tracker } from 'meteor/tracker'; import { compose } from 'react-komposer';

import { SetGoogleMapApiScript, initMap } from './MapFunctions.jsx'; import { getTrackerLoader } from '../../../api/CommonFunction/TrackerLoader.js';

class Map extends React.Component {

componentDidMount () {

    let directions = this.props.directions;

    SetGoogleMapApiScript ( directions );

}

render () {

    return (
    <div className="map-container" id="map-container">

        <PreLoader />

    </div>
    );
}

function reactiveMapper ( props, onData ) {

if ( Meteor.subscribe("directions").ready() && Meteor.subscribe("bus_route").ready() && Meteor.subscribe("bus_checkpoint").ready() ) {

    const directions = Direction.find(),
        busRoutes = BusRoute.find(),
        busCheckPoints = BusCheckPoint.find();

    onData( null, { directions, busRoutes, busCheckPoints } );

};

};

let MapComposed = compose ( getTrackerLoader ( reactiveMapper ) ) ( Map );

export { MapComposed };

};

//another file... let SetGoogleMapApiScript = ( directions )=> {

window.Directions = directions;

Session.set("setMarker", []);

let script = document.createElement( "script" ),
$ = require( "jquery" );

//script.scr="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1-fwP96l-_VAicaDGRNMmEU93TY4fcGs&callback=initMap";
script.setAttribute( "src", "https://maps.googleapis.com/maps/api/js?key=AIzaSyB1-fwP96l-_VAicaDGRNMmEU93TY4fcGs&libraries=places&callback=initMap" );
script.setAttribute( "async", "" );
script.setAttribute( "defer", "" );

$(".script_tag").append( script );

console.log( "Map appended" );

};

// Make global functions window.initMap = ()=> {

// Using ES6 Closure
map = new google.maps.Map( document.getElementById( "map-container" ), {

        center: { lat: 11.5423438, lng: 104.8786078 },
        zoom: 12

});
markers = [];

ShowUserRoute( map, Directions );

SearchBehaviour ( map );

map.addListener('click', ( e )=> addMarker( e.latLng ));

};

/// more hidden.....

` The problem occurs where the composer wrapper around the Map component, if i remove the composer, the map appears in mobile, but i cant pass any data on it.