reactjs - Antd Tree组件，如何添加缓存数据

Question

我对 Antd 库的 Tree 组件有疑问。问题出现在视频中。也就是说，更改数据树后的组件会重新呈现，而在选择一个选项后，先前的组件将被清除。有谁知道如何解决这个问题，以便在更改数据树后，仍然选择之前选择的选项？

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;

有问题的视频链接:https://youtu.be/BLEzQck3cZo

感谢您的帮助!😊

Answer 1

onCheck 回调在你的情况下重写新值。您可以在 useState Hook 中使用 prevState 保存以前的值，如下所示:

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);
    }
};