【Ant Design】Tree树形控件踩坑记录

最新推荐文章于 2024-07-10 16:20:26 发布

转悠的陀螺

最新推荐文章于 2024-07-10 16:20:26 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： # React 文章标签： javascript react.js 前端

本文链接：https://blog.youkuaiyun.com/u011159821/article/details/126843591

React 专栏收录该内容

26 篇文章

订阅专栏

该博客介绍了在使用React的Ant Design Tree组件时遇到的问题，即在设置自定义字段名`fieldNames`后，出现`Treenodemusthaveacertainkey`的警告。解决方案在于为服务端/客户端的数据增加`key`字段，通过遍历并修改数据结构来确保每个节点都有唯一标识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于 React 版

基础用法： 官方文档

坑位props： fieldNames

参数	说明	类型	默认值	版本
fieldNames	自定义节点 title、key、children 的字段	object	{ title: title, key: key, children: children }	4.17.0

示例：

import { Tree } from 'antd';
import React from 'react';

const treeData = [
    {
        title: 'parent 0',
        id: '0-0',
        children: [
            {
                title: 'leaf 0-0',
                id: '0-0-0',
                isLeaf: true,
            },
            {
                title: 'leaf 0-1',
                id: '0-0-1',
                isLeaf: true,
            },
        ],
    }
];

const App = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  const drawerFieldNames = {
  		title: 'title',
      	key: 'id',
     	children: 'children'
  }

  return (
    <Tree
      checkable
      defaultExpandedKeys={['0-0-0', '0-0-1']}
      defaultSelectedKeys={['0-0-0', '0-0-1']}
      defaultCheckedKeys={['0-0-0', '0-0-1']}
      onSelect={onSelect}
      onCheck={onCheck}
      fieldNames={drawerFieldNames}
      treeData={treeData}
    />
  );
};

export default App;

根据上述示例，我们根据官方文档设定了自定义的字段对应名称，理论上应该按照我们设定的字段对应，但实际执行过程中会出现如下错误：

Warning: Tree node must have a certain key: [undefined]
Warning: Tree node must have a certain key: [undefined > undefined]

解决方案：
服务端/客户端对接数据时，将treeList数据增加上key字段；
例如：

formatBookmarksTreeList(list)
{
     list.map((item)=>{
     	 // 此行是重点
         item.key = item.id;
         if (item['children']){
             item.children = formatBookmarksTreeList(item.children);
         }
         return item;
     });
     return list;
 }