我正在嘗試使用@szhsin/react-menu. 我收到一個element未定義的錯誤。componentDidMount尚未運行（控制臺日志中沒有任何內容）。我原以為我if (this.state.Categories == null)會在AddMenu被叫之前趕上。
import Config from 'config';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';
import '@szhsin/react-menu/dist/transitions/slide.css';
import React, { useState } from 'react';
class GetCategories extends React.Component {
constructor() {
super();
this.toggle = this.toggle.bind(this);
this.state = {
name: 'React',
apiData: [],
isOpen: false,
};
}
componentDidMount() {
console.log('app mounted');
fetch(Config.apiUrl "/api/Items/GetCategories")
.then(data => data.json())
.then(data => this.setState({ Categories: data }, () => console.log(data)));
}
render() {
var catList = this.state.Categories;
let categoriesStyled = [];
function AddMenu(category) {
if (category.children.length !== 0) {
console.log(category)
categoriesStyled.push(<SubMenu label={category.name}>);
category.children.forEach(element => AddMenu(element) );
categoriesStyled.push(</SubMenu>);
}
else {
categoriesStyled.push(<MenuItem>{category.name}</MenuItem>);
}
}
if (this.state.Categories == null) {
console.log("NULL");
return (
<div>
<h1>{/*ERROR*/}</h1>
</div>
);
}
else {
for (let i = 0; i < catList.length; i ) {
if (catList[i].name !== undefined) {
AddMenu(catList[i]);
}
}
return (
<div>
<Menu direction={'bottom'} menuButton={<MenuButton>Shop</MenuButton>} transition>
<>
{categoriesStyled}
</>
</Menu>
</div>
);
}
}
}
export default GetCategories;
我確信這是我的愚蠢錯誤，但我還沒有看到。任何幫助將不勝感激。
更新
我的json資料回傳：
[
{
"categoryId": 3091,
"parentId": 0,
"name": "Concrete Services",
"title": "Concrete Services",
"description": "Concrete Services",
"keywords": "Concrete, perfect polish",
"pageContent": "<span style=\"color:Blue; border-color:Blue; font-weight:bold; font-size:18pt;\">Concrete Services<br/><br/><span style=\"color:#ff6600; border-color:#ff6600; font-size:14pt;\">Perfect Polish provides a wide range of services to fit any need.&edsp;&edsp;Either repair of existing floors, or installation of completely new floors.</span><br/></span>",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": [
{
"categoryId": 3092,
"parentId": 3091,
"name": "Concrete Polishing",
"title": "Concrete Polishing",
"description": "Concrete Polishing",
"keywords": "polish, polishing",
"pageContent": "<span style=\"color:Red; border-color:Red; font-style:italic; font-weight:bold; font-size:16pt;\">Concrete Polishing</span><br/><br/>Perfect Polish is the industry leader specializing in polished concrete floors. Our company has performed work across the country for all types of industrial, commercial, and retail facilities. <br/><br/>We perform new construction, facility improvement projects, and provide assistance from pour to completion to insure each project meets our customer expectations.",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
{
"categoryId": 3094,
"parentId": 3091,
"name": "Repair and Restoration",
"title": "Repair and Restoration",
"description": "Repair and Restoration of existing Concrete floors",
"keywords": "repair, restore, restoration",
"pageContent": "<span style=\"color:Navy; border-color:Navy; font-weight:bold;\">Repair & Restoration</span><br/>Perfect Polish has years of experience improving facilities with damaged floors. Our team will assess your floors and determine the amount of repair required to bring your floor back to life. Repair and restoration can include cracked concrete, pop-outs, spalling, joint damage, coating removal and more.",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
{
"categoryId": 3093,
"parentId": 3091,
"name": "Resinous Flooring",
"title": "Resinous Flooring",
"description": "Resinous Flooring",
"keywords": "resinous, resin",
"pageContent": "<span style=\"color:#ff6600; border-color:#ff6600; font-size:14pt;\">Resinous Flooring</span><br/><br/>Perfect Polish provides resinous flooring services for customers with new and existing facilities across the United States. We offer a wide range of resinous flooring options including <span style=\"font-style:italic;text-decoration: underline;\">epoxy, urethane, and acrylic materials, decorative options, line striping, border painting, and more.</span>",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
}
]
},
{
"categoryId": 1005,
"parentId": 0,
"name": "Electrics",
"title": "Electrics",
"description": "Electrics",
"keywords": "Electrics",
"pageContent": "Electrics <span style=\"color:#33cccc; border-color:#33cccc; font-weight:bold;\">- page of information</span>",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": [
{
"categoryId": 1006,
"parentId": 1005,
"name": "FloodLights",
"title": "FloodLights",
"description": "FloodLights",
"keywords": "FloodLights",
"pageContent": "FloodLights",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
{
"categoryId": 1007,
"parentId": 1005,
"name": "Light",
"title": "Lights",
"description": "Lights",
"keywords": "Lights",
"pageContent": "Lights",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
{
"categoryId": 3095,
"parentId": 1005,
"name": "Motors",
"title": "Electric Motors",
"description": "Electric Motors",
"keywords": "Electric Motors, Motors",
"pageContent": "<span style=\"font-weight:bold;\">Electric Motors</span><span style=\"color:#33cccc; border-color:#33cccc; font-weight:bold;\">- Provided by Kinney Electric & Power Transmission</span>",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
}
]
},
{
"categoryId": 3056,
"parentId": 0,
"name": "Fasteners",
"title": "Fasteners",
"description": "Fasteners",
"keywords": "Anchors, bolts, hardware, nails, nuts, pins, clips, rivets, rods, screws, sockets, clamps, hangers, washers",
"pageContent": "<p style=\"text-align:Left;\"><span style=\"border-color:Red; font-weight:bold; font-size:12pt;\"><span style=\"color:Blue; border-color:Blue;\">FASTENERS</span><br/>Same Day Shipping On Bulk Industrial Fasteners</span><br/><span style=\"color:Blue; border-color:Blue; font-style:italic;\">The Fastener Superstore is your one stop shop for nuts,<span style=\"color:Red; border-color:Red;\"> bolts, washers, rivets, standoffs and mo</span>re! <br/>We have <span style=\"text-decoration: underline;\">everything</span> you need right here.&edsp;</span><br/>* 34,000 Distinct Parts<br/>* All Pricing Online<br/>* No Registration Required<br/>* Same Day Shipping on Most Orders<br/>* Order online, via phone, email or fax<br/>* Extended Customer Service Hours (7am-7pm CT)<br/>* Quotes Available for Larger <span style=\"color:#3366ff; border-color:#3366ff;\">Quantities</span></p>",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": [
{
"categoryId": 3057,
"parentId": 3056,
"name": "Bolts",
"title": "Bolts",
"description": "Bolts",
"keywords": "Bolts, Carraige, Dowel, Hanger, Elevator",
"pageContent": "<span style=\"font-style:italic; font-weight:bold;\">The quality of the bolt you use can determine the integrity of the entire structure</span> — whether it’s a building project or a piece of machinery. Builders and contractors looking to buy wholesale nuts and bolts know they can trust Fastener <span style=\"color:Red; border-color:Red;text-decoration: underline;\">SuperStore to have the most comprehensive selection. </span>We are known for providing only the highest quality fastener hardware specific to whatever your application may be. See our list of bolt products and some common uses below, as well as information about what Fastener SuperStore can do for you.",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
{
"categoryId": 3096,
"parentId": 3056,
"name": "MKT",
"title": "MKT",
"description": "MKT Fasteners",
"keywords": "MKT",
"pageContent": "",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
{
"categoryId": 3069,
"parentId": 3056,
"name": "Nails",
"title": "Nails",
"description": "Nails",
"keywords": "Nails",
"pageContent": "",
"bannerGroupId": 0,
"inactive": false,
"issitecategory": false,
"sortOrder": null,
"children": []
},
...
uj5u.com熱心網友回復：
兩個問題
- this.toggle 是未定義的所以
this.toggle = this.toggle.bind(this);是錯誤的 - 您將 JSX 元素推送到陣列中，就像構建字串一樣。它們不是字串。事實上，您在這里創建了一個 JSX 元素，其中包含一些您認為是代碼的內容。
categoriesStyled.push(<SubMenu label={category.name}>);
category.children.forEach(element => AddMenu(element) );
categoriesStyled.push(</SubMenu>);
<Submenu..> category.children.forEach(... </Submenu> 都是 jsx 的一部分，實際上這里只呼叫了一個 push 而不是兩個。
它應該是帶有子元素的單個元素，而不是開始/子元素/結束元素。
categoriesStyled.push(
<SubMenu label={category.name}>
{category.children.forEach(element => AddMenu(element)}
</SubMenu>)
當我洗掉 this.toggle 行并修復推送時，您的代碼作業正常。
uj5u.com熱心網友回復：
this.state.Categories 未定義不為空。你應該嘗試 if(!this.state.Categories) 而不是 if(this.state.Categories == null)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357921.html
標籤：javascript 反应 自我参考
上一篇：使用來自節點js的ajax變數