Antd Tree component, how to add cache data

Question

I have a problem with the Tree component of the Antd library. The problem is presented on the video. Namely that the component after changing the data tree renders anew and after selecting an option the previous ones are cleared. Does anyone have any idea how to solve this, so that after changing the data tree, the previous options that were selected are still selected?

import React, { useState } from 'react';
import { Tree } from 'antd';
import { Wrapper, TreeContainer } from './Tree.styled';


const treeData = [
    {
        title: '0-1',
        key: '0-1',
        children: [
            { title: '0-1-0-0', key: '0-0-0-0', },
            { title: '0-1-0-1', key: '0-0-0-1' },
            { title: '0-1-0-2', key: '0-0-0-2' },
        ],
    },
    {
        title: '0-2',
        key: '0-2',
    },
    {
        title: '0-3',
        key: '0-3',
        children: [
            { title: '0-2-0-0', key: '0-2-0-0', },
            { title: '0-2-0-1', key: '0-2-0-1' },
            { title: '0-2-0-2', key: '0-2-0-2' },
        ],
    },
    {
        title: '0-4',
        key: '0-4',
        children: [
            { title: '0-3-0-0', key: '0-3-0-0', },
            { title: '0-3-0-1', key: '0-3-0-1' },
            { title: '0-3-0-2', key: '0-3-0-2' },
        ],
    },
    {
        title: '0-5',
        key: '0-5',
        children: [
            { title: '0-4-0-0', key: '0-4-0-0', },
            { title: '0-4-0-1', key: '0-4-0-1' },
            { title: '0-4-0-2', key: '0-4-0-2' },
        ],
    },
];

const AntdTree = () => {
    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
    const [optionValue, setOptionValue] = useState<any>();

    const tree = treeData.filter(filterValue => filterValue.key == (!!optionValue ? optionValue : filterValue.key)).map(data => data)

    const onCheck = (checkedKeysValue: any) => {
        console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
    };


    return (
        <>
            <Wrapper>
                <TreeContainer>
                    <select value={optionValue} onChange={e => setOptionValue(e.target.value)} >
                        <option value={'0-1'}>0-1</option>
                        <option value={'0-2'}>0-2</option>
                        <option value={'0-3'}>0-3</option>
                        <option value={'0-4'}>0-4</option>
                        <option value={'0-5'}>0-5</option>
                    </select>
                    <button onClick={() => setOptionValue('')} >Delete</button>
                    <Tree
                        checkable
                        onCheck={onCheck}
                        checkedKeys={checkedKeys}
                        treeData={tree}
                    />
                </TreeContainer>
            </Wrapper>
        </>
    );
};

export default AntdTree;

Link to video with problem: https://youtu.be/BLEzQck3cZo

Thanks for your help !😊

Answer 1

onCheck callback in your case rewrite new values. You can save previous values using prevState in useState hook like so:

const onCheck = (checkedKeysValue: React.Key[], info: any) => {
    console.log('onCheck', checkedKeysValue);
    console.log('info', info);
    if (info.checked) { // handle check case
        setCheckedKeys(prevState => [...prevState, ...checkedKeysValue]);
    } else { // handle uncheck case
        setCheckedKeys(checkedKeysValue);
    }
};