Arrays React-当我试图在其他地方声明它时，数组组件上的映射函数没有定义

我正在尝试为我正在工作的项目构建一个输入表单，该表单将用户数据提交到数据库。某些必填输入字段有100多个选项供用户选择。因此，我想将这些数据选项分离到它们自己的文件中，并将道具传递给选择输入组以动态生成这些选项。但当我试图在表单页面上声明输入组件时，遇到了一个问题。我无法读取未定义的属性“map”。我想这是因为我在选择文件和表单文件中声明了输入组件。我将提供下面的代码，使其更有意义

这是将数组数据提供给输入的代码。这是一个很长的文件，所以我只能发布其中的一部分

const BuildingChoices = () => {

    const buildingArray = [
        {
            id: 1,
            name: "ACB",
            value: "ACB"
        },
        {
            id: 2,
            name: "ADH",
            value: "ADH"
        },
        {
            id: 3,
            name: "AHG",
            value: "AHG"
        },
        {
            id: 4,
            name: "ANB",
            value: "ANB"
        },
        {
            id: 5,
            name: "AND",
            value: "AND"
        }, 
        {
            id: 6,
            name: "ARC",
            value: "ARC"
        }, 
        {
            id: 175,
            name: "WIN",
            value: "WIN"
        },
        {
            id: 176,
            name: "WMB",
            value: "WMB"
        },
        {
            id: 177,
            name: "WPR",
            value: "WPR"
        },
        {
            id: 178,
            name: "WWH",
            value: "WWH"
        } 
    ]

    return (
        <SelectInput arrayData={buildingArray} />
    )
}

export default BuildingChoices

constbuildingchoices=（）=>{
常数建筑阵列=[
{
id:1，
名称：“ACB”，
价值：“ACB”
},
{
id:2，
姓名：“ADH”，
值：“ADH”
},
{
id:3，
名称：“AHG”，
值：“AHG”
},
{
id:4，
名称：“ANB”，
价值：“ANB”
},
{
id:5，
名称：“及”，
价值：“和”
}, 
{
id:6，
名称：“ARC”，
值：“弧”
}, 
{
id:175，
名称：“赢”，
价值观：“赢”
},
{
id:176，
名称：“WMB”，
值：“WMB”
},
{
id:177，
名称：“WPR”，
值：“WPR”
},
{
身份证号码：178，
名称：“WWH”，
价值：“WWH”
} 
]
返回(
)
}
导出默认构建选项

这里是选择输入字段，根据传递给它的数组动态生成选项

import React from 'react'

const SelectInput = (props) => {
   
    return (
        <div className="input-group mb-3">
            <label className="input-group-text" for="inputGroupSelect01">{props.dataName}</label>
            <select onChange={props.onChange} value={props.value} name={props.name} className="form-select" id="inputGroupSelect01"> 
            <option disabled>Choose...</option>
            {props.dataArray.map(data => (
                <option key={data.id} value={data.value}>{data.name}</option>  
                ))}
            </select>
           
        </div>
    )
}

export default SelectInput

从“React”导入React
const SelectInput=（道具）=>{
返回(
{props.dataName}
选择。。。
{props.dataArray.map（数据=>(
{data.name}
))}
)
}
导出默认选择输入

然后这个组件将输入呈现到页面上。它位于代码的最底层。我很确定这是我的问题，因为我在多个文件中声明了

import React, { useState } from 'react'
import SelectInput from "../SelectInput"

const Prjt_Metadata_Form = () => {

    const [inputs, setInputs] = useState({
        project_id: '',
        building: 'Choose...',
        measure_type: '',
        status: '',
        staff_lead: '',
        staff_colead: '',
        analyst: '',
        project_description: '',
        nonenergy_benefits: '',
        baseline_start_date: '',
        reporting_period_start_date: '',
        length_baseline_period_days: '',
        length_reporting_period_days: ''

    });

    const { project_id, building, measure_type, status, staff_lead, staff_colead, analyst, project_description,
        non_energy_benefits, baseline_start_date, reporting_period_start_date, length_baseline_period_days, length_reporting_period_days } = inputs


    const onChange = e => {
        const { name, value } = e.target
        setInputs({
            ...inputs,
            [name]: value
        })
    }

    const onSubmit = async (e) => {
        e.preventDefault();

        try {
            const body = {
                project_id, building, measure_type, status, staff_lead, staff_colead, analyst, project_description,
                non_energy_benefits, baseline_start_date, reporting_period_start_date, length_baseline_period_days, length_reporting_period_days
            }

            const response = await fetch('http://localhost:5000/api/prjt_metadata', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });
            window.location = '/'
            console.log(response)

        } catch (error) {
            console.error(error.message);
        };
    }
    return (
        <div style={{ minHeight: '45vh' }} className="container d-flex align-items-center mt-5">
            <div className="card border-secondary bg-secondary text-center mb-3" >
                <div className="card-body text-black">
                    <form onSubmit={onSubmit}>
                        <div className="row">
                            <div className="col-md-4">
                                <div className="input-group mb-3">
                                    <div className="input-group-prepend">
                                        <span className="input-group-text" id="inputGroup-sizing-lg">Project ID</span>
                                    </div>
                                    <input type="text" name="project_id" className="form-control" value={project_id} onChange={onChange} />
                                </div>
                                <SelectInput
                                onChange={onChange}
                                value={building}
                                name="building"
                                dataName="Building"
                                />

import React，{useState}来自“React”
从“./SelectInput”导入SelectInput
常量Prjt_元数据_表单=（）=>{
常量[inputs，setInputs]=useState({
项目id:“”，
建筑：'选择…'，
度量值类型：“”，
状态：“”，
员工领导：''，
职员学院：''，
分析员：''，
项目描述：“”，
非能源利益：，
基线\开始\日期：“”，
报告期开始日期：''，
长度\基线\周期\天数：“”，
长度\报告期\天数：“”
});
施工人员{项目id、建筑、测量类型、状态、员工领导、员工团队、分析师、项目描述、，
非能源效益、基线开始日期、报告期开始日期、长度基线期天数、长度报告期天数}=输入
const onChange=e=>{
常量{name，value}=e.target
设置输入({
…输入，
[名称]：值
})
}
const onSubmit=async（e）=>{
e、 预防默认值（）；
试一试{
常数体={
项目id、建筑、测量类型、状态、员工领导、员工团队、分析师、项目描述、，
非能源福利、基线开始日期、报告期开始日期、长度基线期天数、长度报告期天数
}
const response=等待获取（'http://localhost:5000/api/prjt_metadata', {
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
body:JSON.stringify（body）
});
window.location='/'
console.log（响应）
}捕获（错误）{
console.error（error.message）；
};
}
返回(
项目ID

---

非常感谢您对我如何使其工作的任何建议！谢谢！

您的SelectInput组件是从props.dataArray映射而来的，但是在您的Prjt\u Metadata\u表单组件中，您的SelectInput缺少dataArray

可能是采用高阶组件方法（HOC）

constbuildingchoices=（组件）=（道具）=>{
常数建筑阵列=[
// { ... }
];
返回(
)
}
导出默认构建选项（选择输入）；

那么你可以这样使用它

问题 查看如何呈现

选择输入

：

然后在

中选择input

映射到不作为道具传递的道具

数据数组

props.dataArray.map（数据=>(
{data.name}
)

替代解决方案 如果您不想让

SelectInput

灵活处理所使用的数据，您可以将

buildingChoices

作为一个常量外包到一个单独的文件

data.js

中，并将其包含在

SelectInput

中以映射到该文件上。

SelectInput.js

中的相关部分应该是这样的：

从'data.js'导入{buildingChoices}；
buildingChoices.map（数据=>(
{data.name}
)

然而，你