我编写了一个react项目,点击新建按钮弹出对话框窗口点击保存数据,把编号和名称保存到一级结构,项目类型父级存储到树形菜单的二级机构,树形控件有一个默认的节点无法删除,那个默认的节点我随便点击反选和选中都不会异常,但是我自己新建的节点当我选中然后再取消选中就会抛出异常,我想要解决的问题是:最好是把这个默认的节点删除掉,然后我自己新建的节点选中反选都不会报错。
import React, { useState } from 'react';
import { Button,TreeSelect,Modal,Input,Select} from 'antd';
const { SHOW_PARENT } = TreeSelect;
function App(){
//定义变量 useState是React中的一个钩子函数，用于在函数组件中添加状态。
//它接受一个初始状态作为参数，并返回一个数组，其中第一个元素是当前的状态值，第二个元素是更新状态值的函数。
const [value, setValue] = useState(['0-0-0']);
const [isModalOpen, setIsModalOpen] = useState(false);
const [newNodeNo, setNewNodeNo] = useState('');
const [newNodeName, setNewNodeName] = useState('');
const [newNodePName, setNewNodePName] = useState('');
const [treeData,setData] = useState([{ title: '默认', value: '0-0', children: [{ title: 'default node', value: '0-0-0' }] }]); // 初始化树形数据
//const [treeData,setData]=useState(null);
const [selectedNode, setSelectedNode] = useState(null);
const [newOptionval,setnewOptionval]=useState('');
//初始化下拉框值
const options = [
{
value: '解决方案',
label: '解决方案',
},
{
value: '项目',
label: '项目',
}
];
const onChange = function (newValue) {
console.log('onChange ', value);
setValue(newValue);
};
const tProps = {
treeData,
value,
onChange,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
placeholder: 'Please select',
style: {
width: '100%',
},
};
const showModal = () => {
setIsModalOpen(true);
};
//保存数据
const handleOk = (event) => {
event.preventDefault();
const randomId = `SL-${Math.floor(Math.random() * 1000000)}`;
const newNode = {
title: `${newNodeNo} - ${newNodeName}`,
value: randomId,
children: [{title: `${newNodeNo} - ${newNodePName}`}],
};
const newData = [...treeData];
if (!selectedNode) {
newData.push(newNode);
} else {
selectedNode.children.push(newNode);
}
setData(newData);
setIsModalOpen(false);
setNewNodeNo('');
setNewNodeName('');
setNewNodePName('');
};
//关闭窗口
const handleCancel = () => {
setIsModalOpen(false);
};
//选中节点
const onSelect = (value, node,extra) => {
if(node){
setSelectedNode(node);
}
};
// //取消勾选
// const onDeselect = () => {
// setSelectedNode(null);
// };
return (
<div>
<>
<Button type="primary" onClick={showModal} >
新建解决方案
</Button>
<Modal title="添加解决方案" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<p>
<Input
type="text"
style={{ width: '80%' }}
placeholder="请输入编号"
value={newNodeNo}
onChange={(event) => setNewNodeNo(event.target.value)}
rules={[{ required: true, message: 'Please input your name' }]}
/>
</p>
<p>
<Input
type="text"
style={{ width: '80%' }}
placeholder="请输入名称"
value={newNodeName}
onChange={(event) => setNewNodeName(event.target.value)}
rules={[{ required: true, message: 'Please input your name' }]}
/>
</p>
<p>
<Input
type="text"
style={{ width: '80%' }}
placeholder="请输入项目名称"
value={newNodePName}
onChange={(event) => setNewNodePName(event.target.value)}
/>
</p>
<p>
<Select style={{ width: '80%' }} defaultValue="解决方案" options={options} />
</p>
<p>
<Input
type="text"
style={{ width: '80%' }}
placeholder=""
value={newNodeNo}
onChange={(event) => setNewNodeNo(event.target.value)}
/>
</p>
</Modal>
</>
<TreeSelect {...tProps} onSelect={onSelect} />
</div>
);
}
export default App;
我初步的认为是默认值的问题因为默认节点不会抛出异常,是初始化的时候就已经赋值了,而我新建的节点没有默认值,当我不选中的时候就没有值了,程序就会报错,可能是验证这块有点问题。
ERROR
Cannot read properties of undefined (reading 'label')
TypeError: Cannot read properties of undefined (reading 'label')
at http://localhost:3000/static/js/bundle.js:36291:37
at Array.map (<anonymous>)
at http://localhost:3000/static/js/bundle.js:36274:19
at Object.current (http://localhost:3000/static/js/bundle.js:36376:25)
at http://localhost:3000/static/js/bundle.js:36861:28
at http://localhost:3000/static/js/bundle.js:36488:7
at onInternalSelect (http://localhost:3000/static/js/bundle.js:35906:5)
at Tree._this.onNodeCheck (http://localhost:3000/static/js/bundle.js:38292:57)
at InternalTreeNode._this.onCheck (http://localhost:3000/static/js/bundle.js:39047:7)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:47512:18)
