将列表转换为动态下拉列表时无法读取未定义的属性“地图" [英] Cannot read property 'map' of undefined while converting a list to a dynamic drop down
本文介绍了将列表转换为动态下拉列表时无法读取未定义的属性“地图"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将项目列表转换为动态下拉选项列表，但我遇到了问题.
我检查了道具是否正确，它们是.
这是转换列表的一段代码:
buildSelectOptions = (opts) =>{return opts.map((opt) => )};使成为() {const {allKeycodes} = this.props.allKeycodes;console.log(allKeycodes);const allKeycodesOptions = this.buildSelectOptions(allKeycodes);}如果在理解问题时遗漏了任何内容，我很抱歉，我随时准备告诉您理解此问题所需的任何内容.
错误说:无法读取未定义的属性地图"
这是完整的代码:
<预><代码>import React, {Component} from "react";从antd"导入 {Modal, Tabs, Row, Col, Button, Alert, Select};从文件保护程序"导入 {saveAs}；从jszip"导入 JSZip；从样式组件"导入样式；从时刻"导入时刻；从components/Shared/TableComponent"导入TableComponent；从assets/images/homeKeyLogoSign.png"导入标志；从assets/images/Logo_HomeKey.png"导入keycodesImage；从assets/images/Homekey-bw.PNG"导入 keycodesImageBW；const {TabPane} = 标签；const 选项 = Select.Option;const StyledModal = styled(Modal)`输入 {高度:50px！重要；}填充:10px！重要；`;const LeftPanel = styled.div`保证金:自动；文字对齐:居中；`;const StyledImg = styled.img`高度:150px；宽度:150px；保证金:自动；margin-bottom: 20px !important;`;const 标签 = styled.p`保证金:自动；文本转换:大写；字体大小:0.9em；margin-top: 5px !important;颜色:#858585；padding-left: 20px;font-family: 'Work Sans', sans-serif;`;const 标题 = styled.h1`颜色:#25B0FF；字体大小:30px；font-family: 'Nunito', sans-serif !important;字体粗细:粗体；文本对齐:左；margin-left: 15px !important;`;const 值 = styled.p`保证金:自动；文本转换:大写；字体大小:1em；margin-top: 5px !important;margin-bottom: 10px !important;颜色:#000000；字体粗细:500；padding-left: 20px;font-family: 'Work Sans', sans-serif;`;const ScansBox = styled.div`保证金:自动；背景色:#F5F5F5；最小高度:20px；宽度:250px；`;const ScanLabel = styled.p`字体大小:1em；文本转换:大写；填充顶部:15px；font-family: 'Work Sans', sans-serif;`;const ScanValue = styled.h1`颜色:#25B0FF ！重要；字体大小:4em；字体粗细:200；填充底部:15px；font-family: 'Nunito', sans-serif !important;字体粗细:粗体；`;const DefaultButton = styled(Button)`保证金:自动；背景:#25B0FF ！重要；颜色:白色！重要；字体粗细:300 ！重要；填充:0 40px！重要；最小高度:50px；宽度:250px；文本转换:大写；margin-bottom: 10px !important;font-family: 'Nunito', sans-serif !important;字体粗细:粗体！重要；边距顶部:15px；`;const DefaultButtonWhite = styled(Button)`保证金:自动；颜色:#25B0FF ！重要；字体粗细:300 ！重要；填充:0 40px ！重要；最小高度:50px；宽度:250px；文本转换:大写；margin-bottom: 10px !important;font-family: 'Nunito', sans-serif !important;字体粗细:粗体！重要；边框:1px 实心 #25B0FF !important;`;const StatusSection = styled.div`最小高度:130px；背景色:#FFFFFF；边框半径:10px；`;const StatusContent = styled.div`高度:570px；背景色:#EEF2F6；填充:20px 20px 20px 20px；`;const ResidenceDetailsSection = styled.div`最小高度:385px；背景色:#FFFFFF；边框半径:10px；边距顶部:20px；`;const DetailsHeader = styled.h1`边距:20px；字体大小:1.5em颜色:#25B0FF ！重要；font-family: 'Nunito', sans-serif !important;字体粗细:粗体；`;const StyledAlert = styled(Alert)`margin-bottom: 20px !important;`;const StyledSelectInput = styled(Select)`margin-bottom: 5px !important;高度:50px！重要；.ant-select-selection--single {高度:50px！重要；}.ant-select-selection__rendered {行高:50px！重要；}font-family: 'Work Sans', sans-serif;最小宽度:250px；`;常量列 = [{title: "日期和时间",数据索引:scan.createdAt"，键:日期时间"，}, {标题:用户ID"，数据索引:device.userId"，键:用户ID"，}, {title: "版本",数据索引: "device.appVersion",键:版本"}, {标题:操作系统"，数据索引: "device.deviceOS",键:操作系统"，}, {title: "设备",数据索引: "device.deviceType",键:设备"，}];类 HomeDetails 扩展组件 {构造函数(道具){超级(道具)；this.state = {正在加载下载:假，错误:空};this.state = {assignKeycodeCkicked: false};}onTabsChange = (key) =>{};formatStatus = (状态) =>{让 formattedStatus = status.charAt(0).toUpperCase() + status.slice(1);return formattedStatus.replace(/[_-]/g, " ");};handleAssignKeycodesClick() {this.setState({assignKeycodeCkicked: 'true'});}downloadSvgAndPng = (keycodeUID) =>{this.setState({loadingDownload: true});const zip = new JSZip();const requests = ['svg', 'png'].map((ext) => this.props.getKeycodeImage(keycodeUID, ext).then((response) => ({分机，文件:响应})));Promise.all(请求).then((responses) => Promise.all(responses.map((response) => zip.file(`${keycodeUID}.${response.ext}`, response.file)))).then(() => zip.generateAsync({type:"blob"})).then((zipFile) => {saveAs(zipFile, `keycode-${keycodeUID}-images.zip`);this.setState({loadingDownload: false});}).catch((错误) => {控制台日志(错误)；this.setState({loadingDownload: false, error: `No images found for keycode: ${keycodeUID}`})})};buildSelectOptions = (opts) =>{return opts.map((opt) => )};selectFilterOptions =(输入，选项)=>{返回 option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0};使成为() {const 数据 = this.props.data ||{keycode: {}, builder: {}, community: {}, home: {}};const keyCodeScans = this.props.keycodeScans ||{计数:0，扫描:[]}；const lastKeycodeScan = keyCodeScans.scans[0] ?时刻(keyCodeScans.scans[0].scan.createdAt).format("MMM DD, YYYY - HH:mm") : "--";this.handleAssignKeycodesClick = this.handleAssignKeycodesClick.bind(this);const {allKeycodes} = this.props.allKeycodes;const allKeycodesOptions = this.buildSelectOptions(allKeycodes);const AssigneKeycode = this.state.assignKeycodeCkicked;控制台日志(所有密钥代码)返回 (<StyledModal可见={this.props.visible}onOk={this.props.closeModal}onCancel={this.props.closeModal}页脚={空}宽度={900}居中><Tabs defaultActiveKey="tab-2" onChange={this.onTabsChange}><TabPane tab={<img alt="homeKeyLogo" src={logo}/>} 禁用键="tab-1"/><TabPane tab="DETAILS" selected key="tab-2"><行>{this.state.error &&<StyledAlert message={this.state.error} type="error"/>}</行><行>{分配密钥代码?<Col span={8}><左面板><StyledImg className="logo" alt="homeKeyLogo" src={keycodesImageBW}/><Title>您确定要分配一个新的 KeyCode 吗?</Title><样式选择输入显示搜索placeholder="选择一个键码ID"optionFilterProp="儿童"></StyledSelectInput><DefaultButton>分配新的键码</DefaultButton><DefaultButtonWhite>取消</DefaultButtonWhite></左面板></Col>:<Col span={8}><左面板><StyledImg className="logo" alt="homeKeyLogo" src={keycodesImage}/><标签>键码ID</标签><值>{data.keycode.uid}</值><标签>批次</标签><值>{data.keycode.keycodeBatchId ||"--"}<扫描框><ScanLabel>总扫描次数</ScanLabel><ScanValue>{keyCodeScans.count ||0}</ScanValue></ScansBox><DefaultButton onClick={() =>this.downloadSvgAndPng(data.keycode.uid)} loading={this.state.loadingDownload}>Download Svg &Png</DefaultButton><DefaultButton onClick={this.handleAssignKeycodesClick}>分配新的键码</DefaultButton></左面板></Col>}<Col span={16}><状态内容><行><状态部分><Col span={12}><DetailsHeader>状态</DetailsHeader><标签>分配给</标签>的键码<值>{data.keycode.assignedAt ?moment(data.keycode.assignedAt).format("MMM DD, YYYY - HH:mm") : "--"}</Value></Col><Col span={12}><DetailsHeader>{data.keycode.status ?this.formatStatus(data.keycode.status):——"}</DetailsHeader><标签>上次扫描</标签><值>{lastKeycodeScan}</值></Col></StatusSection></行><行><住宅详情部分><行><DetailsHeader>居住详情</DetailsHeader><标签>地址</标签><值>{data.home.fullAddress ||"--"}</行><Col span={12}><标签>生成器</标签><值>{data.builder.companyName}</值><标签>居住类型</标签><值>{data.home.homeType}</Value></Col><Col span={12}><标签>社区</标签><值>{data.community.name}</值><标签>激活于</标签><值>{data.keycode.activatedAt ||"--"}</Col></ResidenceDetailsSection></行></状态内容></Col></行></TabPane><TabPane tab="HISTORY" key="tab-3"><行><Col span={24}><TableComponent columns={columns}数据源={keyCodeScans.scans}行键=id"加载={假}onChange={(页面，大小)=>this.props.getKeycodeScans(data.keycode.id, page, size)}计数={keyCodeScans.count}/></Col></行></TabPane></Tabs></StyledModal>);}}导出默认的 HomeDetails；控制台日志中的 allKeycodes 对象:
(500) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, …][0 … 99]0: {id: 10, uid: "1000000000000010", pngLocation: null, svgLocation: null, status: "unassigned", ...}1: {id: 9, uid: "1000000000000009", pngLocation: null, svgLocation: null, status: "ready_to_ship", ...}2: {id: 8, uid: "1000000000000008", pngLocation: null, svgLocation: null, status: "blank", ...}3: {id: 7, uid: "1000000000000007", pngLocation: null, svgLocation: null, status: "ready_to_ship", ...}4: {id: 6, uid: "1000000000000006", pngLocation: null, svgLocation: null, status: "installed", ...}5: {id: 5, uid: "1000000000000005", pngLocation: null, svgLocation: null, status: "installed", ...}6: {id: 4, uid: "1000000000000004", pngLocation: null, svgLocation: null, status: "activated", ...}7: {id: 3, uid: "1000000000000003", pngLocation: null, svgLocation: null, status: "blank", ...}8: {id: 2, uid: "1000000000000002", pngLocation: null, svgLocation: null, status: "unassigned", ...}9: {id: 1, uid: "1000000000000001", pngLocation: null, svgLocation: null, status: "activated", ...}10: {id: 20, uid: "1000000000000020", pngLocation: null, svgLocation: null, status: "ready_to_ship", ...}11: {id: 19, uid: "1000000000000019", pngLocation: null, svgLocation: null, status: "assigned", ...}12: {id: 18, uid: "1000000000000018", pngLocation: null, svgLocation: null, status: "installed", ...}13: {id: 17, uid: "1000000000000017", pngLocation: null, svgLocation: null, status: "blank", ...} ...``` 解决方案
好吧，有几种情况会导致该错误.
1) 如果您的 this.props.allKeycodes 对象内部没有 allKeycodes 属性 - const {allKeycodes} = this.props.allKeycodes; 这将导致未定义，然后导致在未定义上调用映射.
2) 如果在组件中传递 props 时没有默认值，或者没有检查未定义的值，则可能会出现该错误.可以在函数内部查看，也可以在调用函数的时候查看，但不能是undefined.
buildSelectOptions = opts =>选择&&opts.map(....) 此代码将检查 opts 是否不是 falsy 并运行下一段代码.否则它只会导致 undefined.
更新
buildSelectOptions = (opts) =>{返回选项 &&opts.map((opt) => )};或
buildSelectOptions = (opts) =>{如果(选择){return opts.map((opt) => )}};I am working in converting a list of items into a dynamic dropdown option list but I have a problem.
I checked if the props are coming right and they are.
this is the piece of code that converts the list:
buildSelectOptions = (opts) => {
return opts.map((opt) => <Option value={opt.id}>{opt.uid}</Option>)
};
render() {
const {allKeycodes} = this.props.allKeycodes;
console.log(allKeycodes);
const allKeycodesOptions = this.buildSelectOptions(allKeycodes);
}
I am sorry if anything is missing to understand the problem and I am ready to tell anything you need to understand this problem.
the error says: Cannot read property 'map' of undefined
this is the complete code:
import React, {Component} from "react";
import {Modal, Tabs, Row, Col, Button, Alert, Select} from "antd";
import {saveAs} from "file-saver";
import JSZip from "jszip";
import styled from "styled-components";
import moment from "moment";
import TableComponent from "components/Shared/TableComponent";
import logo from "assets/images/homeKeyLogoSign.png";
import keycodesImage from "assets/images/Logo_HomeKey.png";
import keycodesImageBW from "assets/images/Homekey-bw.PNG";
const {TabPane} = Tabs;
const Option = Select.Option;
const StyledModal = styled(Modal)`
input {
height: 50px !important;
}
padding: 10px !important;
`;
const LeftPanel = styled.div`
margin:auto;
text-align:center;
`;
const StyledImg = styled.img`
height:150px;
width:150px;
margin:auto;
margin-bottom: 20px !important;
`;
const Label = styled.p`
margin:auto;
text-transform: uppercase;
font-size:0.9em;
margin-top: 5px !important;
color: #858585;
padding-left: 20px;
font-family: 'Work Sans', sans-serif;
`;
const Title = styled.h1`
color: #25B0FF;
font-size: 30px;
font-family: 'Nunito', sans-serif !important;
font-weight: bold;
text-align: left;
margin-left: 15px !important;
`;
const Value = styled.p`
margin:auto;
text-transform: uppercase;
font-size:1em;
margin-top: 5px !important;
margin-bottom: 10px !important;
color: #000000;
font-weight: 500;
padding-left: 20px;
font-family: 'Work Sans', sans-serif;
`;
const ScansBox = styled.div`
margin:auto;
background-color: #F5F5F5;
min-height:20px;
width:250px;
`;
const ScanLabel = styled.p`
font-size:1em;
text-transform: uppercase;
padding-top: 15px;
font-family: 'Work Sans', sans-serif;
`;
const ScanValue = styled.h1`
color: #25B0FF !important;
font-size:4em;
font-weight: 200;
padding-bottom: 15px;
font-family: 'Nunito', sans-serif !important;
font-weight: bold;
`;
const DefaultButton = styled(Button)`
margin:auto;
background: #25B0FF !important;
color: white !important;
font-weight: 300 !important;
padding: 0 40px !important;
min-height: 50px;
width:250px;
text-transform: uppercase;
margin-bottom: 10px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: bold !important;
margin-top: 15px;
`;
const DefaultButtonWhite = styled(Button)`
margin:auto;
color: #25B0FF !important;
font-weight: 300 !important;
padding: 0 40px !important;
min-height: 50px;
width:250px;
text-transform: uppercase;
margin-bottom: 10px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: bold !important;
border:1px solid #25B0FF !important;
`;
const StatusSection = styled.div`
min-height:130px;
background-color: #FFFFFF;
border-radius:10px;
`;
const StatusContent = styled.div`
height:570px;
background-color: #EEF2F6;
padding: 20px 20px 20px 20px;
`;
const ResidenceDetailsSection = styled.div`
min-height:385px;
background-color: #FFFFFF;
border-radius:10px;
margin-top: 20px;
`;
const DetailsHeader = styled.h1`
margin: 20px;
font-size: 1.5em
color: #25B0FF !important;
font-family: 'Nunito', sans-serif !important;
font-weight: bold;
`;
const StyledAlert = styled(Alert)`
margin-bottom: 20px !important;
`;
const StyledSelectInput = styled(Select)`
margin-bottom: 5px !important;
height: 50px !important;
.ant-select-selection--single {
height: 50px !important;
}
.ant-select-selection__rendered {
line-height: 50px !important;
}
font-family: 'Work Sans', sans-serif;
min-width: 250px;
`;
const columns = [{
title: "Date & Time",
dataIndex: "scan.createdAt",
key: "DateTime",
}, {
title: "UserID",
dataIndex: "device.userId",
key: "UserID",
}, {
title: "Version",
dataIndex: "device.appVersion",
key: "Version"
}, {
title: "OS",
dataIndex: "device.deviceOS",
key: "OS",
}, {
title: "Device",
dataIndex: "device.deviceType",
key: "Device",
}];
class HomeDetails extends Component {
constructor(props) {
super(props);
this.state = {
loadingDownload: false,
error: null
};
this.state = {assignKeycodeCkicked: false};
}
onTabsChange = (key) => {};
formatStatus = (status) => {
let formattedStatus = status.charAt(0).toUpperCase() + status.slice(1);
return formattedStatus.replace(/[_-]/g, " ");
};
handleAssignKeycodesClick() {
this.setState({assignKeycodeCkicked: 'true'});
}
downloadSvgAndPng = (keycodeUID) => {
this.setState({loadingDownload: true});
const zip = new JSZip();
const requests = ['svg', 'png'].map((ext) => this.props.getKeycodeImage(keycodeUID, ext).then((response) => ({
ext,
file: response
})));
Promise.all(requests)
.then((responses) => Promise.all(responses.map((response) => zip.file(`${keycodeUID}.${response.ext}`, response.file))))
.then(() => zip.generateAsync({type:"blob"}))
.then((zipFile) => {
saveAs(zipFile, `keycode-${keycodeUID}-images.zip`);
this.setState({loadingDownload: false});
}).catch((error) => {
console.log(error);
this.setState({loadingDownload: false, error: `No images found for keycode: ${keycodeUID}`})
})
};
buildSelectOptions = (opts) => {
return opts.map((opt) => <Option value={opt.id}>{opt.uid}</Option>)
};
selectFilterOptions = (input, option) => {
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
};
render() {
const data = this.props.data || {keycode: {}, builder: {}, community: {}, home: {}};
const keyCodeScans = this.props.keycodeScans || {count: 0, scans: []};
const lastKeycodeScan = keyCodeScans.scans[0] ? moment(keyCodeScans.scans[0].scan.createdAt).format("MMM DD, YYYY - HH:mm") : "--";
this.handleAssignKeycodesClick = this.handleAssignKeycodesClick.bind(this);
const {allKeycodes} = this.props.allKeycodes;
const allKeycodesOptions = this.buildSelectOptions(allKeycodes);
const AssigneKeycode = this.state.assignKeycodeCkicked;
console.log(allKeycodes)
return (
<StyledModal
visible={this.props.visible}
onOk={this.props.closeModal}
onCancel={this.props.closeModal}
footer={null}
width={900}
centered
>
<Tabs defaultActiveKey="tab-2" onChange={this.onTabsChange}>
<TabPane tab={<img alt="homeKeyLogo" src={logo}/>} disabled key="tab-1"/>
<TabPane tab="DETAILS" selected key="tab-2">
<Row>
{this.state.error && <StyledAlert message={this.state.error} type="error"/>}
</Row>
<Row>
{AssigneKeycode ?
<Col span={8}>
<LeftPanel>
<StyledImg className="logo" alt="homeKeyLogo" src={keycodesImageBW}/>
<Title>Are you sure you want to assign a new KeyCode?</Title>
<StyledSelectInput
showSearch
placeholder="Select a keycode id"
optionFilterProp="children"
>
</StyledSelectInput>
<DefaultButton>Assign new keycode</DefaultButton>
<DefaultButtonWhite>cancel</DefaultButtonWhite>
</LeftPanel>
</Col>
:
<Col span={8}>
<LeftPanel>
<StyledImg className="logo" alt="homeKeyLogo" src={keycodesImage}/>
<Label>Keycode Id</Label>
<Value>{data.keycode.uid}</Value>
<Label>Batch</Label>
<Value>{data.keycode.keycodeBatchId || "--"}</Value>
<ScansBox>
<ScanLabel>Total Scans</ScanLabel>
<ScanValue>{keyCodeScans.count || 0}</ScanValue>
</ScansBox>
<DefaultButton onClick={() => this.downloadSvgAndPng(data.keycode.uid)} loading={this.state.loadingDownload}>Download Svg & Png</DefaultButton>
<DefaultButton onClick={this.handleAssignKeycodesClick}>Assign New Keycode</DefaultButton>
</LeftPanel>
</Col>
}
<Col span={16}>
<StatusContent>
<Row>
<StatusSection>
<Col span={12}>
<DetailsHeader>Status</DetailsHeader>
<Label>Keycode assigned on</Label>
<Value>{data.keycode.assignedAt ? moment(data.keycode.assignedAt).format("MMM DD, YYYY - HH:mm") : "--"}</Value>
</Col>
<Col span={12}>
<DetailsHeader>{data.keycode.status ?
this.formatStatus(data.keycode.status)
: "--"
}</DetailsHeader>
<Label>Last Scan</Label>
<Value>{lastKeycodeScan}</Value>
</Col>
</StatusSection>
</Row>
<Row>
<ResidenceDetailsSection>
<Row>
<DetailsHeader>Residence Details</DetailsHeader>
<Label>Address</Label>
<Value>{data.home.fullAddress || "--"}</Value>
</Row>
<Col span={12}>
<Label>Builder</Label>
<Value>{data.builder.companyName}</Value>
<Label>Residence Type</Label>
<Value>{data.home.homeType}</Value>
</Col>
<Col span={12}>
<Label>Community</Label>
<Value>{data.community.name}</Value>
<Label>Activated On</Label>
<Value>{data.keycode.activatedAt || "--"}</Value>
</Col>
</ResidenceDetailsSection>
</Row>
</StatusContent>
</Col>
</Row>
</TabPane>
<TabPane tab="HISTORY" key="tab-3">
<Row>
<Col span={24}>
<TableComponent columns={columns}
dataSource={keyCodeScans.scans}
rowKey="id"
loading={false}
onChange={(page, size) => this.props.getKeycodeScans(data.keycode.id, page, size)}
count={keyCodeScans.count}
/>
</Col>
</Row>
</TabPane>
</Tabs>
</StyledModal>
);
}
}
export default HomeDetails;
the allKeycodes object from the console log:
(500) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0: {id: 10, uid: "1000000000000010", pngLocation: null, svgLocation: null, status: "unassigned", …}
1: {id: 9, uid: "1000000000000009", pngLocation: null, svgLocation: null, status: "ready_to_ship", …}
2: {id: 8, uid: "1000000000000008", pngLocation: null, svgLocation: null, status: "blank", …}
3: {id: 7, uid: "1000000000000007", pngLocation: null, svgLocation: null, status: "ready_to_ship", …}
4: {id: 6, uid: "1000000000000006", pngLocation: null, svgLocation: null, status: "installed", …}
5: {id: 5, uid: "1000000000000005", pngLocation: null, svgLocation: null, status: "installed", …}
6: {id: 4, uid: "1000000000000004", pngLocation: null, svgLocation: null, status: "activated", …}
7: {id: 3, uid: "1000000000000003", pngLocation: null, svgLocation: null, status: "blank", …}
8: {id: 2, uid: "1000000000000002", pngLocation: null, svgLocation: null, status: "unassigned", …}
9: {id: 1, uid: "1000000000000001", pngLocation: null, svgLocation: null, status: "activated", …}
10: {id: 20, uid: "1000000000000020", pngLocation: null, svgLocation: null, status: "ready_to_ship", …}
11: {id: 19, uid: "1000000000000019", pngLocation: null, svgLocation: null, status: "assigned", …}
12: {id: 18, uid: "1000000000000018", pngLocation: null, svgLocation: null, status: "installed", …}
13: {id: 17, uid: "1000000000000017", pngLocation: null, svgLocation: null, status: "blank", …}...```
解决方案
Well there are a couple of scenarios that can result in that error.
1) If your this.props.allKeycodes object doesn't have a allKeycodes property inside of it - const {allKeycodes} = this.props.allKeycodes; this will result in undefined, which then result in calling map on that undefined.
2) You can get that error, if you don't have a default value when you are passing props in your component/ or you don't check for undefined value. You can check it inside the function, or when calling the function, but it must not be undefined.
buildSelectOptions = opts => opts && opts.map(....) this code will check if opts isn't falsy and run the next bit of code. Otherwise it will just result in undefined.
UPDATE
buildSelectOptions = (opts) => {
return opts && opts.map((opt) => <Option value={opt.id}>{opt.uid}</Option>)
};
OR
buildSelectOptions = (opts) => {
if(opts) {
return opts.map((opt) => <Option value={opt.id}>{opt.uid}</Option>)
}
};
这篇关于将列表转换为动态下拉列表时无法读取未定义的属性“地图"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
