以递归方式向对象添加新属性失败

Question

关注Unexpected outcome when modifying an object in a function
我了解到我必须先克隆item passed to the function，然后再更改它并返回它，它适用于上述示例，但是当我在我的递归代码代码中尝试它时，它不起作用，这是一个示例显示这个：

如您所见，我打算更新属性 B 如果它存在，如果它不存在，我想创建一个属性 B 然后给它最后一个值，但由于某种原因这失败了！当然如果我事先创建了属性 B（在递归调用它之前），我可以给它赋值，但我不知道为什么需要这样做或者为什么我当前的代码不起作用！

function addB(item) {
  let newItem = { ...item };

  if (newItem.B) {
    newItem.B.value = "I am B";
  } else {
    newItem.B = {
      value: "I am B"
    };
  }

  if (newItem.children) {
    newItem.children.forEach(child => {
      //if you uncomment the code below, the code works!
      //child.B = {};
      child = addB(child);
    });
  }

  return newItem;
}

function App() {
  let parent = {
    id: 0,
    children: [
      {
        id: 1,
        children: [
          {
            id: 3
          },
          {
            id: 4
          }
        ]
      },
      {
        id: 2
      }
    ]
  };

  parent = addB(parent);

  console.log(parent);
}  

当前输出：

预期输出：

You can see this example and its result in this CodeSandBox

Answer 1

我认为你可以做到以下几点：

function addB(item) {
  const newItem = { ...item, B: { value: 'I am B' } };

  if (newItem.children) {
    newItem.children = newItem.children.map(addB);
  }
  return newItem;
}

如果你想复制 B 属性（如果它存在）并且只设置 B.value 那么你可以这样做：

const newItem = { ...item, B: { ...item.B, value: 'I am B' } };

function addB(item) {
  const newItem = { ...item, B: { ...item.B,value: 'I am B' } };

  if (newItem.children) {
    newItem.children = newItem.children.map(addB);
  }
  return newItem;
}

console.log(
  addB({
    children: [
      {},
      { children: [{}, { B: { other: 2 } }] },
      { B: { something: 1 } },
    ],
  })
);

另一种写法是：

var addB = item => ({
  ...item,
  B: { ...item.B, value: 'I am B' },
  ...(item.children
    ? { children: item.children.map(addB) }
    : undefined),
});