React 组件：获取语法错误：尝试向我的代码添加函数时无法读取未定义的属性(读取"映射")(0：未定义)

Question

当我试图向代码中添加新函数时，我得到了以下错误：语法错误：无法读取未定义的属性(读取"map"((0:未定义(

我创建了另一个文件，并试图找出造成问题的部分在哪里有人有这个问题吗？

这是我运行的代码：

import TreeView from '@mui/lab/TreeView';
import TreeItem from '@mui/lab/TreeItem';
import * as React from 'react';
import { Component } from 'react';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

interface IProps {
}
class TreeNodeInfo {
Children: TreeNodeInfo[];
HasChildren: boolean;
NodeID: string;
NodeType: string;
Status: string;
Text: string;
}
interface IState {
TreeRoot?: TreeNodeInfo;
Controllers: [];
Loading: boolean;
LoginToken?: string;
}
export class FetchData extends Component<IProps, IState>{
static DisplayName = FetchData.Name;
constructor(props: IProps) {
super(props);
this.state = { TreeRoot: null, Controllers: null, Loading: true, LoginToken: null };
}
componentDidMount() {
this.PopulateData();
}
async PopulateData() {
const loginResponse = await fetch('Ajax/Login', {
body: JSON.stringify({ User: "Test", Password: "Test!234!!", Customer: "bacsoft" 
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
method: "post",
});
var loginToken = await loginResponse.json();
this.setState({ ...this.state, LoginToken: loginToken });
var tree = await this.get('Ajax/tree?depth=2');
var controllers = await this.get('Ajax/controllers');
this.setState({ TreeRoot: tree.Root, Controllers: controllers, Loading: false });
}
// TODO: need to handle session 
async get(url: string): Promise<any> {
var response = await fetch(url, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Bacsoft-Login': this.state.LoginToken
},
});
if (response.ok) {
return await response.json();
} else {
throw new Error(response.statusText);
}
}
render() {
if (this.state.Loading) {
return (<p>Loading... </p>);
}
else {
var TreeData = this.state.TreeRoot;
var ControllersData = this.state.Controllers;
const renderTree = (nodes: TreeNodeInfo) => (
<TreeItem nodeId={nodes.NodeID} label={nodes.Text}>
{Array.isArray(nodes.Children)
? nodes.Children.map((node) => renderTree(node))
: null}
</TreeItem>
);
const renderTreeNewLevel = async (nodes: TreeNodeInfo) => {
if (nodes.HasChildren == true) {
//var nextLevel = await this.readTree(nodes.NodeID, 2);
<div>{renderTree(nodes)}</div>
}
else {
null
}

}
return (
<TreeView
aria-label="rich object"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpanded={['root']}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: 840, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
>
{renderTree(TreeData)}
</TreeView>
);
}

当我尝试添加函数时，甚至像这样的函数，我会得到错误：

test(){
return true;
}

Answer 1

错误意味着nodes是undefined，它的Children道具无法访问。你可以添加一个检查，或者使用可选的链式运算符?:

const renderTree = (nodes: TreeNodeInfo) => (
<TreeItem nodeId={nodes.NodeID} label={nodes.Text}>
{Array.isArray(nodes?.Children) ? nodes.Children.map((node) => renderTree(node)) : null}
</TreeItem>
);