ajax - React child component seems not to be rendered when parent state is updated? -

-

i have (probably stupid) question workflow in react did not yet understand.

i have parent component fetches data server through ajax call. 1 of return values boolean passed child component property. child component again fetches data server (ajax) according property value. somehow parent component it's changes accordingly child not re-render? doing wrong?

parent component:

var l5fmmodal = react.createclass({          getinitialstate : function() {             return {                 initrunswitch : false,                 data : []             };         },          componentdidmount: function() {             this.loaditems('l5fm/setstate', null);         },          loaditems : function(url, modalstate) {             $.ajax({                 url: url,                 contenttype: 'application/json; charset=utf-8',                 data: {modalstate : json.stringify(modalstate)},                 datatype: 'json',                 cache: false,                 success: function(data) {                     this.setstate({data: data, initrunswitch: true});                     console.log(this.state.data);                 }.bind(this),                 error: function(xhr, status, err) {                     console.error(url, status, err.tostring());                 }.bind(this)             });         },          changelistview : function() {             if (this.state.data.listview) {                 var newdata = update(this.state.data, { listview: { $set: false }  });             }             else {                 var newdata = update(this.state.data, { listview: { $set: true } });             }             this.loaditems('l5fm/setstate',newdata);         },          changedirectory : function() {             if (this.state.data.dirstate.private) {                 var newdata = update(this.state.data, {dirstate : { private: { $set: false } } });             }             else {                 var newdata = update(this.state.data, {dirstate : { private: { $set: true } } });             }             this.loaditems('l5fm/setstate',newdata);         },           render: function() {              if (this.state.initrunswitch) {                 if(this.state.data.dirstate.private) {                     var browseicon = "glyphicon-folder-open";                     var browsetext = "browse files";                 }                 else {                     console.log('undefined here');                     var browseicon = "glyphicon-briefcase";                     var browsetext = "browse private files";                 }                  if (this.state.data.listview) {                     var listicon = "glyphicon-picture";                     var listtext = "image view";                 }                 else {                     var listicon = "glyphicon-list";                     var listtext = "list view";                 }             }              return(                  <modal {...this.props} bssize="large" aria-labelledby="contained-modal-title-lg">                     <modal.header closebutton>                         <div classname="header-button-group">                             <l5fmheaderbutton buttonicon="glyphicon-cloud-upload" buttontext="upload" />                             <l5fmheaderbutton onclick={this.changelistview} buttonicon={listicon} buttontext={listtext} />                             <l5fmheaderbutton onclick={this.changedirectory} buttonicon={browseicon} buttontext={browsetext} />                         </div>                     </modal.header>                      {this.state.initrunswitch ? <l5fmmodalbody dirstate={this.state.data.dirstate} listview={this.state.data.listview} />:null}                 </modal>             );         }      });

child component ():

var l5fmmodalbody = react.createclass({          getinitialstate : function() {             return {                 files : []             };         },          componentdidmount: function() {             this.loadfiles('l5fm/setmodalbodystate', this.props.dirstate);         },          loadfiles : function(url, dirstate) {             $.ajax({                 url: url,                 contenttype: 'application/json; charset=utf-8',                 data: {dirstate : json.stringify(dirstate)},                 datatype: 'json',                 cache: false,                 success: function(data) {                     this.setstate({files: data});                 }.bind(this),                 error: function(xhr, status, err) {                     console.error(url, status, err.tostring());                 }.bind(this)             });         },          render: function() {              var object = this.state.files;              return(                 <modal.body>                     <grid fluid={true}>                         <row>                             {this.props.listview ? <l5fmmodalbodylistview fileobject={object} /> : <l5fmmodalbodyimageview fileobject={object} />}                         </row>                     </grid>                 </modal.body>             );         }      });

componentdidmount run on initial render (docs). should react subsequent prop changes inside componentwillreceiveprops.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more