un-mounting a react component... from somewhere

Question

I have a react component P that at its render function calls react comp. A and B. There is a state S of P that can be modified by A, but it is used, through a function, to retrieve some values to be used to render B. The problem is that it seems that B keeps using some old values that somehow makes it to render a table with very unbalanced columns. This is not happening at the first rendering of B. So, how can I do to "reset" or unmount "B" every time S is modified?

Note: I can not modify the code of A and B

Thanks

Code:

var UsersTable = React.createClass ({

    getInitialState: function() {
       return {sel_Options: this.props.ini_Options,
               sel_valueArray: this.props.ini_valueArray
              };
    },

    handleSelectChange (value) {
        console.log('You\'ve selected:', value);
        this.setState({sel_valueArray: value });
    },

    render: function() {

        return(
            <div>
                 <div>
                     <Select name = "form-field-name" options = {this.state.sel_Options}  value = {this.state.sel_valueArray} multi={true} onChange={this.handleSelectChange}/>                  
                 </div>

                 <div>
                    <BootstrapTable data={this.props.ini_usersTbl} striped search cellEdit={ cellEditProp } height='600px' insertRow={ true } scrollTop={ 'Bottom' } multiColumnSearch={ true } options={ options } headerStyle = {{ background: '#ebf5ff'}} >      
                        {   
                        rAll_column_components(compsMap, this.state.sel_valueArray)
                    }
                    </BootstrapTable>
                 </div>
            </div>

        );      
    }


});

Here, sel_Options has the array with all the column names that can be presented on the table. sel_valueArray has the column names that the user is actually viewing on the table. rAll_column_components(compsMap, this.state.sel_valueArray) retrieves all the components that will be used to present the columns in the table.

Another note:
rAll_column_components is returning a list of TableHeaderColumn components where its elements look like:

 <TableHeaderColumn dataField={'lastName'} width={'180'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Last Name'}</TableHeaderColumn>

and everytime it is called it returns that array with the original values for each column. However, the table is able to show those columns but with the "width" property completely changed and the columns look quite unbalanced.

Use forceUpdate() everytime you update the state. Or implement shouldComponentUpdate. i think the value you assign to state is complicated, so that it cannot be compare to update. — Dat Tran, Apr 28 '17 at 21:24

score 0 · Answer 1 · answered Apr 28 '17 at 21:31

0

Use the componentWillUpdate lifecycle method. It runs every time the state changes. Something like this.

componentWillUpdate(nextProps, nextState){
if(nextState.s != this.state.s)
    //reset B
}

That //reset B can be a this.forceUpdate() although the component should be resetting B anyway when S changes. So the problem seems to be that the rerendering with the new state is not happening properly which in my opinion can happen with problems with the key prop and it not being unique when S changes (hence the diffing alogrithm is not working properly).

answered Apr 28 '17 at 21:31

mrinalmech

2,065
1
20
18

Just tried this, placing: componentWillUpdate(nextProps, nextState){ if(nextState.s != this.state.s) this.forceUpdate(); }, and no effect – Jose Cabrera Zuniga Apr 28 '17 at 21:55
The `sel_valueArray` is changing with the `Select` right? The console is printing the correct value? The error I believe is with this `rAll_column_components(compsMap, this.state.sel_valueArray)`. This is the mapping function (which maps the array to columns). There msut be some error with the `keys` here. Can you post this function? – mrinalmech Apr 28 '17 at 22:09
the function is working well as everytime the selected columns are shown. The problem is that the width value is not respected and some columns appear like 4 times wider than others – Jose Cabrera Zuniga Apr 28 '17 at 22:35
Ok. That must be something to do with the internal working of the `BootstrapTable` component which manages the widths etc. It would be hard to solve your problem without going into the `BootstrapTable` component. – mrinalmech Apr 28 '17 at 23:25
I found this error: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `UsersTable`. Could this also be the cause of my problem? – Jose Cabrera Zuniga May 01 '17 at 16:25
Maybe. Add a unique key (maybe array index or something from the json file). `{'Last Name'}` – mrinalmech May 02 '17 at 06:37

un-mounting a react component... from somewhere

1 Answers1