Флакторы дерева дизайна муравья не обновляются при очистке соответствующего значка до тех пор, пока вручную не проверены ⇐ Javascript

[Anonymous]

У меня есть компонент дерева дизайна муравья, а также значки, которые соответствуют элементам в компоненте дерева. Когда я "очищаю значок", он должен снять с собой соответствующую коробку для этого элемента на дереве. Но это не делает этого, даже если утверждение FecedKeys, которое передается в компонент дерева, правильно обновляется. Только после того, как я сначала снял коробку, а затем очищаю другие значки, которые на самом деле обновляется компонент дерева, а соответствующие коробки становятся неконтролированными. < /P>
import { useRef, useEffect, useMemo, useState } from "react";
import { Tree } from "antd";
import type { TreeDataNode, TreeProps } from "antd";
import { Badge } from "@/components/ui/badge";
import { X } from "lucide-react";
import { filterBrand } from "@/app/(dashboard)/custom-audiences/brands-tree-utils";

type BrandsTreeProps = {
treeData: TreeDataNode[];
checkedKeys: TreeProps["checkedKeys"];
onChecked: (checkedKeys: string[]) => void;
};

export default function BrandsTree({
treeData,
checkedKeys,
onChecked,
brandCharacteristics,
handleBadgeClear,
}: BrandsTreeProps) {
const [selectedNodes, setSelectedNodes] = useState([]);

useEffect(() => {
const finalArr = Object.values(brandCharacteristics).flat();
setSelectedNodes(finalArr);
}, [brandCharacteristics]);

const onCheck = (checkedKeysValue: TreeProps["checkedKeys"]) => {
if (checkedKeysValue === undefined) {
return;
}

let checkedKeysArray: string[];

if (Array.isArray(checkedKeysValue)) {
checkedKeysArray = checkedKeysValue.map(String);
} else {
checkedKeysArray = checkedKeysValue.checked.map(String);
}

onChecked(checkedKeysArray);
};

return (

Brands

{selectedNodes.length > 0 &&
selectedNodes.map((item, index) => {
return (


{item}
{
handleBadgeClear(item);
}}
>




);
})}

{!!treeData.length && (

)}

);
}

< /code>
function onChecked(checkedKeys: CheckedKeys) {
if (!Array.isArray(checkedKeys)) {
return;
}
const keys = checkedKeys.map(String);
form.setValue("brand_ids", convertBrandHierarchyToIds(brands, keys));
setCheckedKeys(keys);

setIsSizeRefreshRequired(true);
}

function handleBadgeClear(brandName: string) {
const updatedBrandKeywordCheckedKeys = filterBrand(
brandKeywordCheckedKeys,
brandTreeData,
brandName,
);

onChecked(updatedBrandKeywordCheckedKeys);
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... adge-until