我有一个用于渲染2个组件的组件(一个是节点列表,另一个是到相应节点的数据) 第一次单击节点时,组件将被渲染,但是当我单击节点时,组件将不被渲染。
**
class DeviceTreeView extends Component {
constructor(props){
super(props);
this.onSelect = this.onSelect.bind(this);
this.state = {
selectedNode: {},
selectedID: 0
}
}
onSelect(node) {
let {selectedNode} = this.state;
if(_.isEmpty(selectedNode)){
this.setState({selectedNode:node, selectedID: node.id }, () => {
console.log("INSIDE IF: ",this.state.selectedID);
console.log("OUTSIDE IF-ELSE: "+JSON.stringify(selectedNode));
});
} else {
this.setState({selectedNode:node, selectedID: node.id }, () => {
console.log("INSIDE ELSE AFTER NODE: ",this.state.selectedID);
console.log("INSIDE ELSE: "+JSON.stringify(this.state.selectedNode));
});
}
}
render() {
return (
<div className="content">
<DevicesHeader/>
<div className="row">
<div id ="devices-tree-left" className="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<Tree onSelect={this.onSelect} nodes={devices} displayCheckboxes={this.props.displayCheckboxes} toggleTreeCheckbox={this.toggleTreeCheckbox} selectedDeviceId={this.props.selectedDeviceId}/>
</div>
<div id ="devices-tree-right" className="col-xs-12 col-sm-12 col-md-9 col-lg-9">
{ !_.isEmpty(this.state.selectedNode) && !_.isEmpty(this.state.selectedID) && this.state.selectedNode.type === 'device' && <DevicePage id={this.state.selectedID} />}
</div>
</div>
</div>)
}
}
**