reactjs - React setState is null -


i can't undestand how can pass information between 2 pages? i'm using react router , can pass id through link , take correct string array. looks this:

//my array  var data = [       {id: 1, title: "breaking news #1", text: "this 1 test new", date: "12.05.2015"},       {id: 5, title: "breaking news #2", text: "this *another* test new", date: "03.05.2015"}     ];  //my fetch function  componentdidmount: function() {         var id = this.props.params.id;         var dt = data;         var post = [];         (var i=0; i<dt.length; i++){             if (dt[i].id == id){                 post.push(dt[i]);             };         };         this.setstate({post : post});     }, 

and after i'm trying map info using function this.state.post.map(function (p) { , have error uncaught typeerror: cannot read property 'post' of null

as understood state null. why?

update:

to clarify problem want share code, of course!

first of all, have array 'data', said before. next step - route (by react router) pass id through 2 pages:

var routes = (   <route path="/" handler={newsapp}>     <defaultroute handler={newslist}/>     <route name="id" path=":id" handler={singlepostbox}/>   </route> ); 

so have singlepostbox component data , id. in component next things:

var singlepostbox = react.createclass({     componentdidmount: function() {         var id = this.props.params.id;         var dt = data;         (var i=0; i<dt.length; i++){             if (dt[i].id == id){                 post.push(dt[i]);             };         };         this.setstate({post : post});         console.log(this.state);     },     render: function(){     return(     <div classname="readiv">         <singlepost />         <commentbox />     </div>     );     } }); 

and have 1 string data, matched id , had been pushed inside 'post' array. , after want use post array in map string different divs. in case have console.log(this.state) = null.

i'm sorry, if have stupid mistake, i'm trying use react third day.

i think need create inititalstate. empty {} object should okay.

may have https://facebook.github.io/react/docs/component-specs.html#component-specifications , https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

object getinitialstate() invoked once before component mounted. return value used initial value of this.state.

i doing

var data = [       {id: 1, title: "breaking news #1", text: "this 1 test new", date: "12.05.2015"},       {id: 5, title: "breaking news #2", text: "this *another* test new", date: "03.05.2015"}     ];  getinitialstate() {         return this.data; }, 

and make logic in componentdidmount. state should not null.

try console.log(this.state) in render method. see if state null or post propertie.

you should @ flux implementation (https://github.com/voronianski/flux-comparison) , store state in store, can listen pages store. way can share data between pages. sidenote find easier have 1 store (and 1 state) each page, , other information passed through properties. hope helps.

update:

sometimes not of react-component. object of framework example:

onfetchbyid(id) {         var = this;         var url = '/user/' + id         agent('get', url).             end().             then(function onresult(res) {                 var result = json.parse(res.text);                 that.data = that.data.set('result', result);                 console.log(result);                 that.trigger(that.data);             });     }, 

inside function this isnt react this. bypass problem storing in variable called @ beginning (var = this;).


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -