The actual view of the component does not receive updates

Question

I have a React component that manages several accordions in the list, but when I update the children, the React dev tools show the updated text, but it does not update in the / ui view. Please advice.

var AccordionComponent = React.createClass({ getInitialState: function() { var self = this; var accordions = this.props.children.map(function(accordion, i) { return clone(accordion, { onClick: self.handleClick, key: i }); }); return { accordions: accordions } }, handleClick: function(i) { var accordions = this.state.accordions; accordions = accordions.map(function(accordion) { if (!accordion.props.open && accordion.props.index === i) { accordion.props.open = true; } else { accordion.props.open = false; } return accordion; }); this.setState({ accordions: accordions }); }, componentWillReceiveProps: function(nextProps) { var accordions = this.state.accordions.map(function(accordion, i) { var newProp = nextProps.children[i].props; accordion.props = assign(accordion.props, { title: newProp.title, children: newProp.children }); return accordion; }); this.setState({ accordions: accordions }); }, render: function() { return ( <div> {this.state.accordions} </div> ); } 

Edit:
The component raised the componentWillReceiveProps event, but it never gets updated anyway.

thanks

Answer 1

After several attempts to solve this problem, I came out with a solution. The componentWillReceiveProps event was a trigger when component details changed, so there was no problem. The problem was that the children from AccordionListComponent , AccordionComponent did not update their values ​​/ props / status.

Current solution:

 componentWillReceiveProps: function(nextProps) { var accordions = this.state.accordions.map(function(accordion, i) { // get current accordion key, and props value // update new props with old var newAc = clone(accordion, nextProps.children[i].props); // update current accordion with new props return React.addons.update(accordion, { $set: newAc }); }); this.setState({ accordions: accordions }); } 

I tried to only clone and reset the accordions, but apparently it did not update the component.

thanks

Answer 2

I ran into a similar problem. Therefore, it may be important to report my decision here.

---

I had a graph that was not updated every time I clicked only the data download button (I could see a visual change after the second click).

The graph component was designed as a child of the parent component (connected to the Redux repository), and the data was transmitted, therefore, as a support.

Problem: the data was correctly delivered from the storage (in the parent), but it seems that the graph component (child) does not respond to them.

Decision:

  componentWillReceiveProps(nextProps) { this.props = null; this.props = nextProps; // call any method here } 

Hope this can help in something.