react使用树形控件展示数据选中反选会异常

我编写了一个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;

我初步的认为是默认值的问题因为默认节点不会抛出异常,是初始化的时候就已经赋值了,而我新建的节点没有默认值,当我不选中的时候就没有值了,程序就会报错,可能是验证这块有点问题。

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/806908674286111.png "#left")
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)

 <Select
      defaultValue="lucy"
      style={{
        width: 120,
      }}
      onChange={handleChange}
      options={[
        {
          value: 'jack',
          label: 'Jack',
        },
        {
          value: 'lucy',
          label: 'Lucy',
        },
        {
          value: 'Yiminghe',
          label: 'yiminghe',
        },
        {
          value: 'disabled',
          label: 'Disabled',
          disabled: true,
        },
      ]}
    />

select 注释看看 还报错吗

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7458485
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：react中点击事件带参数会立即执行
• 除此之外, 这篇博客: React实现疫情情况列表展示中的 具体实现 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• import React, { Component} from 'react';
  import ReactDOM from 'react-dom';
  import jsonData from './list-total.json'
  import { Table } from 'tinper-bee';
  import 'bee-table/build/Table.css';
  /**
   * 这部分学习的是React 来展示地图信息
   */
  console.log(jsonData)
  let allworldObj ={
      // 就是相当于先新定义一个对象。
  }
  jsonData.data.areaTree.forEach((item,i)=>{
      // 
      if(allworldObj[item.name]==undefined){
           /** 
       * 用来判断是否真的存在 因为我们看到有些值的定义是undefined 
       * 需要先进行一个初始化
       *  */
          allworldObj[item.name] ={
              confirm:0,
              suspect:0,
              heal:0,
              dead:0
          }
      }
     /**
      * 对于一些值为null的存在，也要进行初始化。
      */
      item.today.confirm= item.today.confirm? item.today.confirm:0;
      item.today.suspect= item.today.suspect? item.today.suspect:0;
      item.today.heal = item.today.heal? item.today.heal: 0;
      item.today.dead=item.today.dead?item.today.dead:0;
      allworldObj[item.name] = {
          // 对信息进行统计处理 计算： 等于当前的值加上新获取到的值。
          confirm:allworldObj[item.name].confirm+item.today.confirm,
          suspect:allworldObj[item.name].suspect+ item.today.suspect,
          heal: allworldObj[item.name].heal+ item.today.heal,
          dead: allworldObj[item.name].dead+item.today.dead
      }
  });
  let allList =[]// 定义一个空的数组
  for (const key in allworldObj) {
      allworldObj[key].name =key
      //  将信息的名字也加载到里面
      allList.push(allworldObj[key])
  }
  allList.sort((a,b)=>{
      // 顺序排列 
     return   a.confirm<b.confirm?1:-1
  })
  console.log(allList)
  function ListItem(props){
      /**
       * 利用平台提供的组件
       * import { Table } from 'tinper-bee';
       * 导入表格信息。
       *  */ 
  const columns = [
      {title: "序号",dataIndex: "index",key: "index",width: 80},
      {title: "国家名称",dataIndex: "orderCode",key: "orderCode",width: 200},
      {title: "确诊人数",dataIndex: "supplierName",key: "supplierName",width: 200},
      {title: "成功治愈",dataIndex: "type_name",key: "type_name",width: 200},
      {title: "怀疑人数",dataIndex: "purchasing",key: "purchasing",width: 200},
      {title: "死亡人数：",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
    ];
    const data = [
      { 
        index:props.index+1,
        orderCode: props.data.name, 
        supplierName: props.data.confirm,
        type_name: props.data.heal,
        purchasing:props.data.suspect, 
        purchasingGroup:props.data.suspect,
        key:'1'
      }
    ];
      return(
          <Table 
          className="demo" 
          columns={columns} 
          data={data} />
      )
  }
  class Bll extends React.Component{
      constructor(props){
          super(props)
      }
      render(){
          let WorldList = this.props.list.map((item,index)=>{
              return(
                  <ListItem key ={index} data={item} index={index}></ListItem>
              )
          });
          return(
              <div>
                  <h1>全球病理</h1>   
                      {WorldList}    
              </div>
          )
      }
  }   
  ReactDOM.render(
      <Bll list={allList}/>,
      document.querySelector('#root')
  )
  

• 您还可以看一下 搬砖的乔布梭老师的React基础极简入门课程中的 React实战后台管理07：添加商品OK小节, 巩固相关知识点