0

我有一个反应组件 P，它在其渲染函数中调用 react comp。A 和 B。P 的状态 S 可以被 A 修改，但它是通过一个函数来检索一些用于渲染 B 的值。问题是 B 似乎一直在使用一些旧的以某种方式使其呈现具有非常不平衡的列的表的值。这在 B 的第一次渲染时不会发生。那么，每次修改 S 时，我该如何“重置”或卸载“B”？

注意：我不能修改A和B的代码

谢谢

代码：

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>

        );      
    }


});

在这里， sel_Options 具有包含可以在表上显示的所有列名的数组。sel_valueArray 具有用户实际在表上查看的列名。rAll_column_components(compsMap, this.state.sel_valueArray) 检索将用于呈现表中列的所有组件。

另一个注意事项：
rAll_column_components 返回一个 TableHeaderColumn 组件列表，其中的元素如下所示：

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

每次调用它时，它都会返回该数组，其中包含每列的原始值。但是，表格能够显示这些列，但“宽度”属性完全改变了，并且这些列看起来很不平衡。

4

1 回答 1

0

使用componentWillUpdate生命周期方法。每次状态更改时它都会运行。像这样的东西。

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

这//reset B可能是一个this.forceUpdate()尽管组件应该在 S 更改时重置 B 的情况。所以问题似乎是新状态的重新渲染没有正确发生，在我看来，这可能与key道具问题有关，并且当 S 变化时它不是唯一的（因此差异算法无法正常工作）。

于 2017-04-28T21:31:47.997 回答