reactjs - How to refresh props with React/Redux when user enters a container -


i have competitionsection repeats competitions database. when user clicks on one, redirects him competition page, loads second , renders page details in it. far, good.

but when users goes competition section , click on second competition, instantly loads previous competition, 0 loading time.

from point of view, failing props of component not updating when render component (from second time). not router problem, first instinct because i'm seeing route.params changing acordingly, actions dispatch change props not dispatching. here's bit of code of said component.

class competitionpage extends react.component {  componentwillmount() {   let id = getidbyname(this.props.params.shortname)   this.props.dispatch(getcompaction(id));   this.props.dispatch(getcompmatches(id));   this.props.dispatch(getcompparticipants(id));   this.props.dispatch(getcompbracket(id)); }  render() {     let { comp, compmatches, compbracket, compparticipants } = this.props  ...

i tried every lifecycle method know. component will/did mount, component will/did update , set shouldupdate true , didn't trick. understand, problem solved lifecycle method dispatch actions everytime user enters competition page , not first time. i'm running out of options here, appreciated.

note: i'm newbie @ react/redux know there couple of things there anti-pattern/poorly done.

update: added competitionssection

 class competitionssection extends react.component {     render() {        const {competitions} = this.props;           return (            ...            { object.keys(competitions).map(function(comp, i) {            return (                 <div key={i} classname={competitions[comp].status ===                 undefined? 'hide-it':'col-xs-12 col-md-6'}>                ...                <link to={"/competitions/"+competitions[comp].shortname}>                    <raisedbutton label="ver torneo" primary={true} />                </link>                ...

it helps better understand lifecycle hooks. mounting component when placed on dom. can happen once until removed dom. update occurs when new props passed or setstate called. there few methods troubleshoot when updates not happening when think should:

  1. ensure changing state in componentdidmount or componentdidupdate. cannot trigger update in componentwillmount.

  2. make sure new props or state new objects. if passing object down in props , mutating object, not trigger update. instance, not trigger update:

class competitionpage extends react.component {   constructor(props) {     super(props)      this.state = {       competitions: [ compa, compb ]     }   }    triggerupdate() {     this.setstate({       competitions: competitions.push(compc)     })   }  componentdidmount() {   triggerupdate() }  render() {   return(     <div>       hello     </div>   ) }

this due fact new competition being appended array in state. correct way completly create new state object , change needs changed:

const newcompetitions = this.state.competitions.concat(compc)  this.setstate(object.assign({}, this.state, { competitions: newcompetitions }))
  1. use componentwillrecieveprops on update compare previous , current prop values. can setstate here if clean needs done:

read more method in react documentation:

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more