递归更改树是禁用布尔值

Question

给定一棵树：

type DataType = {
  id: string;
  access: 'view' | 'none';
  isDisabled: boolean;
  children: DataType[];
};

const Data: DataType = {
  id: '1',
  access: 'view',
  isDisabled: false,
  children: [
    {
      id: '2',
      access: 'view',
      isDisabled: false,
      children: [
        {
          id: '3',
          access: 'view',
          isDisabled: false,
          children: [],
        },
        {
          id: '4',
          access: 'view',
          isDisabled: false,
          children: [],
        },
      ],
    },
    {
      id: '5',
      access: 'view',
      isDisabled: false,
      children: [],
    },
  ],
};

我想做的是当一个节点的访问权限发生变化时，isDisabled布尔值会根据以下规则发生变化：

如果访问是“查看”，则 isDisabled 将保持为 false 如果 access 为 'none'，则当前节点的 isDisabled 为 false，但其子节点的 isDisabled 为 true。

这就是我现在拥有的：

export const find = (data, selectedId, access) => {
  if (!selectedId || !access) {
    return data;
  }

  if (data.id === selectedId) {
    data = changeAccess(data, selectedId, access);
    return data;
  }
  data.children.map((child) => find(child, selectedId, access));

  return data; // this is where the problem lies, but not sure how to fix it
};

export const changeAccess = (data, selectedId, access) => ({
  ...data,
  access: access,
  isDisabled: data.id !== selectedId && access !== 'view' ? true : false, // this toggles isDisabled
  children: data.children?.map((child) =>
    changeAccess(child, selectedId, access)
  ),
});

所以当我调用“查找”时

const result = find(Data, '2', 'none');

结果应该等于以下：

const DataAfter: DataType = {
  id: '1',
  access: 'view',
  isDisabled: false,
  children: [
    {
      id: '2',
      access: 'none',
      isDisabled: false,
      children: [
        {
          id: '3',
          access: 'none',
          isDisabled: true,
          children: [],
        },
        {
          id: '4',
          access: 'none',
          isDisabled: true,
          children: [],
        },
      ],
    },
    {
      id: '5',
      access: 'view',
      isDisabled: false,
      children: [],
    },
  ],
};

Answer 1

您在代码中突出显示的部分：

  data.children.map((child) => find(child, selectedId, access));

  return data; // this is where the problem lies, but not sure how to fix it

... 没有使用.map() 返回的数组。所以data 会以其原始状态返回。

当映射的子数组有一个或多个新对象时，您应该返回一个新对象：

  const children = data.children.map((child) => find(child, selectedId, access));
  if (data.children.some((child, i) => child !== children[i])) {
    data = {
      ...data,
      children
    };
  }

  return data;