时间戳

首页 > 解决方案 > React 组件：出现语法错误：尝试将函数添加到我的代码时无法读取未定义的属性（读取“地图”）（0：未定义）

reactjs - React 组件：出现语法错误：尝试将函数添加到我的代码时无法读取未定义的属性（读取“地图”）（0：未定义）

问题描述

当我尝试向我的代码中添加新函数时，出现此错误：语法错误：无法读取未定义的属性（读取“地图”）（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;
}

标签： reactjstypescript

解决方案

该错误意味着无法访问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>
);

推荐阅读