Question

我有3个数据集，它们是一个对象数组，并且我想更改text属性值。

某些数据集具有递归结构。这意味着它具有children属性，该属性是具有相同结构的对象数组。

我做了一个基于id更改文本值的函数。但是在2nd或3rd数据集的迭代中遇到问题。我正在使用map方法进行迭代，请检查item是否具有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

Answer 1

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

如果您不想更改item.children的值，则应返回具有更新的children属性的新对象（返回{children：changeText（..），...}），而不要使用“ original”项。

// 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) {
                item.children = changeText(iD, text, item.children);
                return item;
            }
            // Wrong id return old data
            return item;
        }

    });
    return newArr;
};

// Test for 1st Dataset
let resultArray = [];
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 subpart return

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

JavaScript函数未返回正确的数据

1 个答案: