折叠面板里面查询菜单树时如何做到数据不污染

遇到一个需求就是通过点击每一个折叠面板查询当前panel title的tree数据，问题就是我点击下一个panel的时候查到的数据会覆盖我上一次查询出来的数据，因此数据污染了，那就要处理一下数据。

// 折叠面板

<Collapse onChange={onChange}>
    {newRoleDatas?.map((item)=>( // newRoleDatas是我处理过后的数据，原来的数据是roleData
        <Panel header={item.label} key={item.label}>
            <Tree treeData={treeData} />
        </Panel>
    ))}
</Collapse>

数据处理之前，我先得把我调接口拿到的数据先进行处理一下，给每次查出来的数据一个初始状态(isSelected) false，我展开就为true，关闭就为false。

const [selectedRole, setSelectedRole] = useState([]); // 展开面板的key(包括每一次的key)
const [newRoleDatas, setNewRoleDatas] = useState([]); // 处理之后的roleData
const preRole = useRef(); //上一次存下来的数据

// 折叠面板的变化事件
const onChange=(key)=>{
    setSelectedRole(key)
}

useEffect(()=>{
    // 立即执行函数是因为用到了async函数
    (async ()=>{
        const newData = selectedRole?.filter(item=>{
            return !preRole.current?.includes(item);
        })
        let res = [];
        // 控制只打开panel时调接口
        if(newData?.[0] || selectedRole.length > preRole.current?.length){
            res = await getTreeData(newData[0])
        }
        const newArr = roleData?.map(item=>{
            // 两个数组有相同的值就改变isSelected的状态
            const isSame = selectedRole?.find(it=>it===item.label)
            item.isSelected = !!isSame
            // 给当前展示的那条数据的value存调接口出来的数据，再通过value去渲染每一个panel有哪些值
            if(item.isSelected && item.label === _.last(selectedRole) && res?.length){
                item.value = res;
            }
            return item;
        })
        // 存上一次选中的key
        preRole.current = selectedRole;
        setNewRoleDatas(newArr);
    })()
},[getTreeData, roleData, selectedRole])