使用 Typescript 渲染反应 antd 树不返回任何数据

Question

I've tried to convert the Tree example from antd to use TypeScript but the child-renderfunction dosen't return anything. The commented row render when i remove the comment.

The RenderTreeNodes function is running for each element in the array. I have also tried to use an const - arrow function.

How do i do this with typescript?

Simplified code

import React from "react"
import { Tree } from "antd";
import "./GeoFilter.css";
const { TreeNode } = Tree;

export const geoData = [{
  "value": "1|dl|1",
  "title": "Campingområdet",
  "children": [{
    "value": "1|dl|1 | C1",
    "title": "Södra Campingområdet",
    "children": undefined
  }, {
    "value": "1|dl|1 | C2",
    "title": "Östra Campingområdet",
    "children": undefined
  }
  ]
}, {
  "value": "1|PR|2",
  "title": "Stugområdet",
  "key": "1|PR|2",
  "children": [{
    "value": "1|PR|2 | C1",
    "title": "Södra Stugområdet",
    "children": undefined
  }, {
    "value": "1|PR|2 | C2",
    "title": "Östra Stugområdet",
    "children": undefined
  }
  ]
}
]

export interface IGeoFilterItem {
  value: string,
  title: string,
  children: Array<IGeoFilterItem> | undefined
}

const GeoFilterTree = () => {

  function renderTreeNodes(data: Array<IGeoFilterItem> | undefined) {
    if (data !== undefined) {
      data.map(item => {
        if (item.children) {
          return (
            <TreeNode title={item.title} key={item.value} dataRef={item}>
              {renderTreeNodes(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.value} title={item.title} />;
      });
    }
    else {
      return <TreeNode />;
    }
  }

  return (<Tree checkable>
    {/* <TreeNode key="a" title="Test" />  */}
    {renderTreeNodes(geoData)}

  </Tree>
  );
}

export default GeoFilterTree

Answer 1

The problem was that i missed to put return in front of data.map

So the render function should look like this:

function renderTreeNodes(data: Array<IGeoFilterItem> | undefined) {
if (data !== undefined) {
  return data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.value} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode key={item.value} title={item.title} />;
  });
}
else {
  return <TreeNode />;
}

}