Component中添加第二个Tree组件后报错

[Yangandmore]

你好，我正在使用element-react来完成我的工作，但是我发现了一个问题，在一个component里面我放置了两个Tree控件，他们接受相同的数据来展示，但是在加入第二个tree并配置好options的时候发生了问题，控制台发生了如下图所示的报错

下面是我的代码
<div> { this.props.fetch && <Loading fullscreen /> } <div style={{ marginTop: 8, marginBottom: 8 }}> <Layout.Row> <Layout.Col span="8"> <div style={{ marginLeft: 8, marginRight: 8 }}> <div ref={(refs) => { this.addDiv = refs; }} style={{ marginBottom: 8 }} > <Button type="info" size="small" icon="plus" onClick={() => { this.addClick(); }}>新增</Button> <Button type="warning" size="small" icon="edit" onClick={() => { this.addClick(); }}>修改</Button> <Button type="danger" size="small" icon="delete" onClick={() => { this.addClick(); }}>删除</Button> </div> <Tree style={{ height: letfHeight }} data={this.props.menuList.records} options={{ children: 'child', label: 'name' }} onNodeClicked={(node) => this.setState({ nodes: node.child })} highlightCurrent /> </div> </Layout.Col> <Layout.Col span="16"> <div style={{ marginLeft: 8, marginRight: 8 }}> <TableView style={{ width: '100%' }} height={rightHeight} columns={[ { label: '名称', prop: 'name' }, { label: '路由', prop: 'route_name' }, { label: '排序', prop: 'sort' }, { label: '创建日期', prop: 'create_date', render: (data) => <span>{moment(data.create_date).format('yyyy-MM-DD HH:mm:ss')}</span> } ]} data={this.state.nodes} /> </div> </Layout.Col> </Layout.Row> </div> <DialogView title="删除菜单" visible={this.state.deleteVisible} size="tiny" onSubmit={() => { this.deleteMenu(); }} onCancel={() => this.setState({ deleteVisible: false })} > <span>删除该项</span> </DialogView> <DialogView title={this.state.dialogTitle} visible={this.state.addVisible} size="tiny" onSubmit={() => { switch (this.state.dialogTitle) { case '新增字典': this.addDict(); break; case '修改字典': this.updateDict(); break; default: } }} onCancel={() => this.setState({ addVisible: false })} > <Form model={this.state.dialogForm} labelWidth="100"> <Form.Item label="名称"> <Input value={this.state.dialogForm.name} onChange={(value) => { this.onChange('dialogForm', 'name', value); }} /> </Form.Item> <Form.Item label="路由"> <Input value={this.state.dialogForm.route_name} onChange={(value) => { this.onChange('dialogForm', 'route_name', value); }} /> </Form.Item> <Form.Item label="父菜单"> <Tree data={this.props.menuList.records} options={{ label: 'name', children: 'child', }} highlightCurrent /> </Form.Item> <Form.Item label="排序"> <InputNumber defaultValue={this.state.dialogForm.sort} onChange={(value) => { this.onChange('dialogForm', 'sort', value); }} min="1" max="999" /> </Form.Item> </Form> </DialogView> </div>

但是我在尝试处理的时候发现，只需要在第二个tree中修改children的字段为一个不存在的值如‘childs’，页面就不会报错，当然这样的话功能也不会正常