JavaScript函数未返回正确的数据

我有3个数据集，它们是一个对象数组，我想更改

text

属性值

有些数据集具有递归结构。这意味着它有一个

children

属性，该属性是具有相同结构的对象数组

我做了一个函数，可以根据

id

更改文本值。但是在第二个或第三个数据集的迭代中遇到了问题。我正在使用

map

方法进行迭代，检查

项

是否有

children

属性，然后再次调用相同的方法

为什么在

2nd

或

3rd

数据集上，函数返回子属性值？

// Dataset 1
const data = [{
    id: '1',
    pid: null,
    children: null,
    text: ''
}];

// Dataset 2
const data2 = [{
    id: '1',
    pid: null,
    text: '',
    children: [{
        id: '1.1',
        pid: '1',
        children: null,
        text: ''
    }],
}];

// Dataset 3
const data3 = [{
    id: '1',
    pid: null,
    text: '',
    children: [{
            id: '1.1',
            pid: '1',
            children: null,
            text: ''
        },
        {
            id: '1.2',
            pid: '1',
            children: null,
            text: ''
        }
    ],

}];

/**
 * @param {string} iD
 * @param {string} text
 * @param {Array.<Object>} data
 * @returns {Array.<Object>}
 */
const changeText = (iD, text, data) => {
    const newArr = data.map(item => {
        if (item.id === iD) {
            // Construct new array of object with updated values
            return {
                ...item,
                text
            };
        } else {
            if (item.children !== null && item.children.length > 0) {
                return changeText(iD, text, item.children)
            }
            // Wrong id return old data
            return item;
        }

    });
    return newArr;
};

// Test for 1st Dataset
console.log('--Dataset 1---');
console.log(changeText('1', 'Foo', data)); // Passed
console.log('--Dataset 1---');
console.log(changeText('1.1', 'Foo', data)); // Passed

// Test for 2nd Dataset
console.log('--Dataset 2---');
console.log(changeText('1.1', 'Foo', data2)); // Value is changed but children array is return

// Test for 3rd Dataset
console.log('--Dataset 3---');
console.log(changeText('1.2', 'Foo', data3)); // Value is changed but children array is return

//数据集1
常数数据=[{
id:'1'，
pid:null，
children:null，
文本：“”
}];
//数据集2
常数数据2=[{
id:'1'，
pid:null，
文本：“”，
儿童：[{
id:'1.1'，
pid:'1'，
children:null，
文本：“”
}],
}];
//数据集3
常数数据3=[{
id:'1'，
pid:null，
文本：“”，
儿童：[{
id:'1.1'，
pid:'1'，
children:null，
文本：“”
},
{
id:'1.2'，
pid:'1'，
children:null，
文本：“”
}
],
}];
/**
*@param{string}iD
*@param{string}文本
*@param{Array.}数据
*@返回{Array.}
*/
常量changeText=（iD、文本、数据）=>{
const newArr=data.map（项=>{
如果（item.id==id）{
//用更新的值构造对象的新数组
返回{
…项目，
文本
};
}否则{
如果（item.children！==null&&item.children.length>0）{
返回changeText（iD、text、item.children）
}
//错误的id返回旧数据
退货项目；
}
});
返回newArr；
};
//第一个数据集的测试
log（'--Dataset 1--'）；
console.log（changeText（'1'，'Foo'，data））；//通过
log（'--Dataset 1--'）；
log（changeText（'1.1'，'Foo'，data））；//通过
//第二个数据集的测试
log（'--Dataset 2---'）；
log（changeText（'1.1'，'Foo'，data2））；//值已更改，但返回子数组
//第三个数据集的测试
log（'--Dataset 3---'）；
log（changeText（'1.2'，'Foo'，data3））；//值已更改，但返回子数组

您应该将item.children设置为changeText递归调用的结果，并返回项本身（在更改之后）

如果不想更改item.children值，则应返回一个新对象，该对象具有更新的children属性（返回{children:changeText（..），…}），而不是“原始”项

//数据集1
常数数据=[{
id:'1'，
pid:null，
children:null，
文本：“”
}];
//数据集2
常数数据2=[{
id:'1'，
pid:null，
文本：“”，
儿童：[{
id:'1.1'，
pid:'1'，
children:null，
文本：“”
}],
}];
//数据集3
常数数据3=[{
id:'1'，
pid:null，
文本：“”，
儿童：[{
id:'1.1'，
pid:'1'，
children:null，
文本：“”
},
{
id:'1.2'，
pid:'1'，
children:null，
文本：“”
}
],
}];
/**
*@param{string}iD
*@param{string}文本
*@param{Array.}数据
*@返回{Array.}
*/
常量changeText=（iD、文本、数据）=>{
const newArr=data.map（项=>{
如果（item.id==id）{
//用更新的值构造对象的新数组
返回{
…项目，
文本
};
}否则{
如果（item.children！==null&&item.children.length>0）{
item.children=changeText（iD、text、item.children）；
退货项目；
}
//错误的id返回旧数据
退货项目；
}
});
返回newArr；
};
//第一个数据集的测试
设resultArray=[]；
log（'--Dataset 1--'）；
console.log（changeText（'1'，'Foo'，data））；//通过
log（'--Dataset 1--'）；
log（changeText（'1.1'，'Foo'，data））；//通过
//第二个数据集的测试
log（'--Dataset 2---'）；
log（changeText（'1.1'，'Foo'，data2））；//值已更改，但返回
//第三个数据集的测试
log（'--Dataset 3---'）；
log（changeText（'1.2'，'Foo'，data3））；//值已更改，但返回子部分

问题出在changeText函数中，您在该函数中返回

changeText（iD、text、item.children）

。相反，您应该将该结果分配给item.children，然后让它返回包含更新子项的完整项：

if（item.children！==null&&item.children.length>0）{item.children=changeText（iD，text，item.children）}return item请记住，目前Edge不支持对象文字的扩展语法。您可以通过以下操作绕过此问题：
item.text=text；退货项目
@Mouser感谢注意点。如果不想更改item.children值，您的意思是什么。你能详细说明一下吗？它的意思是不想变异儿童财产。是的，我的意思是“不想变异儿童财产”。在本例中使用：return{id:item.id，pid:item.pid，children:changeText（id，text，item.children），text:item.text}；