Javascript不从另一个文件导入变量答案

【问题标题】：Javascript not importing variable from another fileJavascript不从另一个文件导入变量
【发布时间】：2020-09-16 11:52:06
【问题描述】：

formFields.js

export const invoiceFormFields = [
    {label: 'First Name', name: 'firstName', type: 'text'},
    {label: 'Last Name', name: 'lastName', type: 'text'},
    {label: 'Deliverables', name: 'deliverables', type: 'text'},
    {label: 'Email', name: 'email', type: 'email'},
    {label: 'Amount', name: 'amount', type: 'number'}
]

InvoiceForm.js

import React, { useContext } from 'react'
import { NewInvoiceContext } from '../../contexts/newInvoice.context'
import { Link } from 'react-router-dom'
import {
    Typography,
    Paper,
    TextField,
    makeStyles,
    Button,
    CssBaseline,
} from '@material-ui/core'

import { invoiceFormFields } from './formFields'

const useStyles = makeStyles((theme) => ({
    title: {
        marginBottom: '1rem',
    },
    form: {
        display: 'flex',
        flexDirection: 'column',
    },
    formInput: {
        marginTop: '1rem',
    },
    formButtons: {
        display: 'flex',
        marginTop: '2rem',
        justifyContent: 'space-between',
    },
}))

const InvoiceForm = ({ history }) => {
    const classes = useStyles()
    const {formDetails, handleFormChange, handleShowReview} = useContext(NewInvoiceContext)

    const newInvoiceFields = invoiceFormFields.map(({ label, name, type }) => (
        <TextField
            key={name}
            label={label}
            name={name}
            className={classes.formInput}
            type={type}
            required
            onChange={handleFormChange}
            value={formDetails[name]}
        />
    ))


}

export default InvoiceForm

我收到了错误

尝试导入错误：“./formFields”不包含默认导出（导入为“formFields”）。

据我所知，我正在正确地导出和导入 - 有人知道这里会发生什么吗？

谢谢

【问题讨论】：

该错误不是来自该代码，听起来您在某处有另一个import（或陈旧的错误消息）。您没有尝试在与formFields 相关的任何import 中使用默认导出。
@MitchellCartwright - 不幸的是，SO 的工作方式，你的整个问题（包括任何必要的代码）必须in 你的问题，而不仅仅是链接。三个原因：人们不应该去场外帮助你；某些网站被某些用户屏蔽；和链接腐烂，使问题及其答案对未来的人们毫无用处。请在问题中输入minimal reproducible example in。更多：How do I ask a good question? 和 Something in my web site or project doesn't work. Can I just paste a link to it? 和 minimal reproducible example。
（为避免疑问：您是对的，您从formFields 显示的导出和导入都很好。根据您的环境，可能需要文件扩展名（例如，from "./formFields.js" 而不仅仅是 from "./formFields"），但错误消息似乎与此无关。）
感谢@T.J.Crowder - 将排除故障以查看是否是 linting 问题。感谢您的帮助
希望你能找到！ :-)

标签： javascript reactjs ecmascript-6

【解决方案1】：

我想这会让它起作用。

export const invoiceFormFields = [
    {label: 'First Name', name: 'firstName', type: 'text'},
    {label: 'Last Name', name: 'lastName', type: 'text'},
    {label: 'Deliverables', name: 'deliverables', type: 'text'},
    {label: 'Email', name: 'email', type: 'email'},
    {label: 'Amount', name: 'amount', type: 'number'}
];

export default {
    invoiceFormFields,
}

import { invoiceFormFields } from './formFields';

【讨论】：

将具有invoiceFormFields 属性的对象导出为默认导出；您最后的命名导入无法导入作为默认导出导出的对象的 property。 :-) 再次，正如对该问题的不止一条评论所述，export 和 import 显示很好。我们无法以当前形式回答问题，因为显示的代码不会导致所描述的问题。