React list集合中嵌套树形组件，在操作数据的隔绝继承

Question

我写了一个React的功能，使用andt ui框架中的List组件和Treeselect树形组件
我在子组件中建立了添加数据的功能，并在父组件中进行引用。
我每次点击新建数据，都会保存数据到集合和树形组件中。
场景:
点击新建->输入数据保存->数据存储到集合和树形组件中 形成集合1。
点击新建->输入数据保存->数据存储到集合和树形组件中 形成集合2。集合2中新建的集合里面的树形组件会继承集合
1中的新建完成的树形组件数据。
我想要不继承集合1中的数据，每次新建一个集合都相当于是最新的跟其他的集合不会存在依赖和继承的关系。
思路：可以用一个唯一的值进行区分，或者在进行展开的时候用这个展开组件 重新渲染一下数据。
代码如下：

import { Avatar, List,Collapse,TreeSelect   } from 'antd';
import React, { useState } from 'react';
import ProjectComponets from '../ModalForm/ProjectComponets';
import { PlusCircleOutlined,SolutionOutlined,DeleteOutlined } from '@ant-design/icons';
import SolutionComponets from './SolutionComponets';
import FormComponets from '../ModalForm/FormComponets';
const { SHOW_PARENT } = TreeSelect;
function ListTreeComponets ()  {

  const [searchValue, setSearchValue] = useState('');
  const [value, setValue] = useState(undefined);
  const [listData,setListData]=useState([]);
  const randomId = `SL-${Math.floor(Math.random() * 1000000)}`;
  const [isModalOpenForm,setIsModalOpenForm]=useState(false);
  const [isModalOpenBaic,setIsModalOpenBasic]=useState(false);
  // const [AttributeData, setAttributeData] = useState(null);
  const [selectedNode, setSelectedNode] = useState(null);
  const [selectedAttributeData, setSelectedAttributeData] = useState(null);
  const { Panel } = Collapse;
  const [treeData, setTreeData] = useState([]);// 初始化树形数据
  const [selectedKey,setSelectedKey]=useState(null);
  const [AttributeData, setAttributeData] = useState({ // 初始化为一个空对象
    newNodeNo: '',
    newNodeName: '',
    ProjecTtype: '',
    Parentlevel: '',
  });
  

  const onChange = function (newValue) {
    console.log('val:',newValue)
    setValue(newValue);
};

const onSearch = (value) => {
    setSearchValue(value);
   
};

const onSelect = (value, node) => {
  debugger
    setSelectedNode(node);   
    setSelectedKey(value);
    handleSelectNode(value);
  };

    const tProps = {
    treeData,
    value,
    onChange,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: 'Please select',
    style: {
        width: '100%',
        
    },
    filterTreeNode: (node, searchValue) => {
        if (node.title && node.title.toLowerCase) {
          return node.title.toLowerCase().includes(searchValue.toLowerCase());
        }
        return false;
      },
    treeDefaultExpandAll: true,
    onSearch: onSearch,
    onSelect: onSelect,
};

const handleSelectNode = (selectedKey) => {
  debugger
    setSelectedKey(selectedKey); 
  };

  const handleSave = (formData) => {
    const newAttributeData = { ...AttributeData, ...formData };
      // 将新数据与旧数据合并，不替换旧数据
      setAttributeData({...newAttributeData});
      const newNode = {
        title: (
          <span>
            {`${formData.newNodeName}`}
  
          </span>
        ),
        value: `${formData.newNodeNo}-${formData.newNodeName}`, // 使用相同格式作为 value
        children: [
          { title: `${formData.ProjecTtype}-${formData.Parentlevel} `, value: `${randomId}-1` },
          { title: <PlusCircleOutlined onClick={showModalForm} />, value: `${formData.newNodeNo}-${formData.newNodeName}-2`, children: [] }
        ]
      }; 
  
      const TreeNode={
        title: (
          <span>
            {`${formData.newNodeName}`}
            <DeleteOutlined onClick={(event) => handleDelete(`${formData.newNodeNo}-${formData.newNodeName}`, event)} />
            <SolutionOutlined  onClick={() => showModalBaisc(AttributeData)} style={{ marginLeft: '5px', marginRight: '5px' }}/> 
             <PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '5px', marginRight: '5px' }} /> 
          </span>
        ),
        value: `${formData.newNodeNo}-${formData.newNodeName}`, // 使用相同格式作为 value
       }
  
      setListData([...listData, newNode]); // 将新节点对象附加到现有列表数据中 
      //同时新增到树形组件
      const newData = [...treeData];
      newData.push(TreeNode);
      setTreeData(newData);
  
      setSelectedNode(newNode); // 将新节点设置为当前所选节点
      setSelectedAttributeData(newAttributeData); // 更新 `selectedAttributeData`
    };


  const showModalForm = () => {
    setIsModalOpenForm(true);
  };

const handleCloseModal=()=>{
setIsModalOpenForm(false);
};

const showModalBaisc = (data) => {
  debugger
   setSelectedNode(data);
   setIsModalOpenBasic(true);
};

const handleCloseModalBasic=()=>{
  setIsModalOpenBasic(false);
};

const handleDelete=(value,event)=>{
  event.preventDefault();
  const newData = listData.filter((node) => node.value !== value);
   setListData(newData);
  setTreeData(newData);
}

          const FormSave = (data, nodeId) => {
          
          };

        

  return(

<div>
<ProjectComponets 
onSave={(formData) => handleSave(formData, setListData)}
/>   
/>
      <List style={{width:'50%'}}
  itemLayout="horizontal"
  dataSource={listData}
  renderItem={(item, index) => (
  <Collapse bordered>
    <Panel header={item.title} key={index}>
      <List.Item.Meta
        avatar={<Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />}
        description="This is a solution project for generating Word documents"
    
     />
     <TreeSelect  {...tProps} onSelect={onSelect}   treeData={treeData} />
      {/* <PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '20px', marginRight: '10px' }} />
      <SolutionOutlined  onClick={() => showModalBaisc(AttributeData)}/> */}
    </Panel>
  </Collapse>

  )}
/>
  </div>
  );
};

export default ListTreeComponets;

上图

Answer 1

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7791977