时间戳

首页 > 解决方案 > JavaScript 函数没有返回正确的数据

javascript - JavaScript 函数没有返回正确的数据

问题描述

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

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

我做了一个函数，它根据id. 2nd但是在or数据集的迭代中面临一个问题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

标签： javascript

解决方案

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

如果你不想改变 item.children 的值，你应该返回一个更新了 children 属性的新对象（return { children: changeText(..), ... }）而不是“原始”项目。

// 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

推荐阅读