Javascript “我该如何解决？”；尝试导入错误：'；组件'；不是从'；导出的/组件&x27&引用；

我尝试导入响应窗体 但是 错误

未能编译/src/components/projects/ProjectDetails.js 尝试导入错误：“ResponseForm”未从“/ResponseForm”导出

发生了

ResponseForm组件实际上存在。 这条路似乎是正确的。 我该怎么修？ 为什么会发生导入错误

import  {Component}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'

const ResponseForm = () => {
    state = {
        content: ''
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.createProject(this.state)
    }

    return (
        <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">KAITO</h5>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">TEST</button>
            </div>
        </form>
    </div>
    )
}

export default ResponseForm;

从“react”导入{Component}
从“react redux”导入{connect}
从“../../store/actions/projectActions”导入{createProject}
从“react router dom”导入{Redirect}
常量响应形式=（）=>{
状态={
内容：“”
}
handleChange=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
})
}
handleSubmit=（e）=>{
e、 预防默认值（）
this.props.createProject（this.state）
}
返回(
海东
试验
)
}
导出默认响应窗体；

从“react redux”导入{connect}；
从“react-redux firebase”导入{firestoreConnect，useFirestoreConnect}；
从“redux”导入{compose}；
从“/ResponseForm”导入{ResponseForm}；
const ProjectDetails=（道具）=>{
const{project}=props；
国际单项体育联合会（项目）{
返回(
{project.title}
{project.content}

);
}否则{
返回(
游荡项目

);
}
};

因为您使用的是

导出默认值

，所以您的导入语句应该如下所示：

import ResponseForm from "./ResponseForm";

（无花括号）

或者，您可以将第一个文件更改为：

export const ResponseForm = () => {

---

并删除末尾的导出默认值行。然后，您可以保留当前的导入语法。

因为您使用的是

导出默认值

，您的导入语句应该如下所示：

import ResponseForm from "./ResponseForm";

（无花括号）

或者，您可以将第一个文件更改为：

export const ResponseForm = () => {

并删除末尾的导出默认值行。然后，您可以保留当前的导入语法。

Answer 响应表单是默认的导出：

导出默认响应窗体

您应该像这样导入它：

import ResponseForm from "./ResponseForm";

从“/ResponseForm”导入响应表单

使用非默认导出
如果要避免将其作为默认导出，可以执行以下操作：

import  {Component}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'

export const ResponseForm = () => {
    state = {
        content: ''
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.createProject(this.state)
    }

    return (
        <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">KAITO</h5>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">TEST</button>
            </div>
        </form>
    </div>
    )
}

从'react'导入{Component}
从“react redux”导入{connect}
从“../../store/actions/projectActions”导入{createProject}
从“react router dom”导入{Redirect}
导出常量响应形式=（）=>{
状态={
内容：“”
}
handleChange=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
})
}
handleSubmit=（e）=>{
e、 预防默认值（）
this.props.createProject（this.state）
}
返回(
海东
试验
)
}

并按上述方式导入：

从“/ResponseForm”导入{ResponseForm}
答案
响应表单是默认的导出：

导出默认响应窗体

您应该像这样导入它：

import ResponseForm from "./ResponseForm";

从“/ResponseForm”导入响应表单

使用非默认导出
如果要避免将其作为默认导出，可以执行以下操作：

import  {Component}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'

export const ResponseForm = () => {
    state = {
        content: ''
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.createProject(this.state)
    }

    return (
        <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">KAITO</h5>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">TEST</button>
            </div>
        </form>
    </div>
    )
}

从'react'导入{Component}
从“react redux”导入{connect}
从“../../store/actions/projectActions”导入{createProject}
从“react router dom”导入{Redirect}
导出常量响应形式=（）=>{
状态={
内容：“”
}
handleChange=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
})
}
handleSubmit=（e）=>{
e、 预防默认值（）
this.props.createProject（this.state）
}
返回(
海东
试验
)
}

并按上述方式导入：

从“/ResponseForm”导入{ResponseForm}
这是因为您正在将ResponseFrom作为默认值导出，并尝试使用{}进行导入

谁需要喜欢这个

import ResponseForm from "./ResponseForm";

而不是

import { ResponseForm } from "./ResponseForm";


在ProjectDetails中，这是因为您正在将ResponseFrom作为默认值导出，并尝试使用{}进行导入

谁需要喜欢这个

import ResponseForm from "./ResponseForm";

而不是

import { ResponseForm } from "./ResponseForm";


项目详情