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
Post a Comment