javascript - Why is this.state.name not being used properly in my component? -
i have teamname
store stores name of team , changes on depending on whether name clicked/hovered.
teamstore.js:
function setname(name) { _team = name; _original = name; } //set temp team name when sidemenu item being hovered function sethover(team) { _original = _team; _team = team; } function removehover() { //console.log(_original); _team = _original; }
i have thumbnail.jsx
listens store , triggers _updatearticle
method when this.state.name
changes. however, not working properly.
- the articles don't change when item being hovered.
- the articles change hovered item on hover leave (which shouldn't) should go original 1 clicked.
thumbnail.jsx:
var thumbnail = react.createclass({ mixins: [reactfiremixin], getteamstate() { return teamstore.getselected() ; }, getinitialstate() { return { name: this.getteamstate(), articles: [] }; }, getdefaultprops() { return { baseurl: "https://shining-inferno-1085.firebaseio.com/" } }, _updatearticle() { //console.log(this.state.name); var teamref = new firebase(this.props.baseurl + this.state.name + "/results"); this.bindasarray(teamref, 'articles'); }, componentdidmount() { teamstore.addchangelistener(this._onchange); this._updatearticle(); }, componentwillunmount() { teamstore.removechangelistener(this._onchange); this.unbind("articles"); }, render() { return ( <ul classname="tiles"> <basicinfo article={this.state.articles} /> </ul> ) }, _onchange() { var team = this.getteamstate(); this.setstate({name: team}); //console.log(this.props.baseurl + this.state.name + "/results"); this.unbind("articles"); this._updatearticle(); } }); module.exports = thumbnail;
p.s have title component listens same store , works fine. let me know if need that.
edit: care explain downvote?
this problem similar this.
setstate() not mutate this.state creates pending state transition. accessing this.state after calling method can potentially return existing value.
Comments
Post a Comment