我有一个反应组件P,它的渲染函数调用反应comp。 A和B.有一个P的状态S可以被A修改,但它通过一个函数被用来检索一些用来渲染B的值。问题是B似乎继续使用一些旧的以某种方式使它呈现具有非常不平衡列的表的值。在B的第一次渲染时不会发生这种情况。那么,我怎样才能重置"重置"或卸下" B"每次修改S?
注意:我无法修改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>
并且每次调用它时都会返回该数组,其中包含每列的原始值。但是,该表能够显示那些列,但宽度为&#34;属性完全改变,列看起来非常不平衡。
答案 0 :(得分:0)
使用componentWillUpdate
生命周期方法。它在每次状态改变时运行。这样的事情。
componentWillUpdate(nextProps, nextState){
if(nextState.s != this.state.s)
//reset B
}
//reset B
可以是this.forceUpdate()
,但是当S发生变化时,组件应该重置B。所以问题似乎是新状态的重新发生没有正确发生,在我看来,key
道具问题可能会发生,而当S改变时它不是唯一的(因此差异算法不能正常工作) )。