通过带有键数组的树结构推送到子级

Question

我正在使用 React Tree 为我的应用程序构建树结构。我想在每次扩展节点时执行服务器请求，以便加载该节点的子节点。我正在使用onExpand属性来获取扩展节点的密钥。这很好用，但是当节点不在树的第一级时，就会出现问题。

当节点不在第一级时，onExpand属性返回一个键数组，该数组将遍历已打开的每个键，直到到达节点为止。我的问题是，从服务器获取子数据(要附加)后，我需要将其推送到扩展节点的子节点，并且我需要遍历树数据以在扩展节点上进行推送。

例：

这是构建树的数据：

const data = [
{
key: 1,
title: 'one',
children: [
{
key: 2,
title: 'two',
},
{
key: 3,
title: 'three',
children: [
{
key: 5,
title: 'five',
children: []
}
]
},
{
key: 4
title: 'four',
}
]
}
];

如果我用键5扩展子项，那么我从onExpand得到一个带有键[1， 3， 5]的数组。

然后我从我的服务器中获取5的孩子，然后我想做这样的事情：

data[1][3][5].children.push(/*datafromserver*/)

我该怎么做？

这是动态的，所以我需要以某种方式为每个onExpand键数组循环一个级别。

感谢您的帮助。

Answer 1

如果我理解正确，您有一些键的数组以及子项和键的数据，并且您想找到正确的子项。 您可以使用递归来执行此操作。 例如：

function findItem(children, keys){
	if (keys.length === 0) {
		return;
}
	var key = keys[0];
	 
	var child = (children || []).filter(function(child){
		return child.key === key
	})[0];
	if (child) {
		if (keys.length === 1) {
			return child;
} else {
			return findItem(child.children, keys.slice(1));
}
}
}
var data = [
{
key: 1,
title: 'one',
children: [
{
key: 2,
title: 'two',
},
{
key: 3,
title: 'three',
children: [
{
key: 5,
title: 'five',
children: []
}
]
},
{
key: 4,
title: 'four'
}
]
}
];

var itemFound = findItem(data, [1,3,5]);
console.log(itemFound.key);
//add some data to is children - itemFound.children.push(someData);