หน้าแรกไม่มีการส่งออกชื่อ Home


123

ผมทำงานด้วยและมาข้ามปัญหานี้ที่ผมได้รับcreate-react-appHome does not contain an export named Home

วิธีตั้งค่าApp.jsไฟล์มีดังนี้

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

ตอนนี้ในlayoutsโฟลเดอร์ของฉันฉันมีHome.jsไฟล์ ซึ่งเป็นการตั้งค่าดังต่อไปนี้

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export default Home;

อย่างที่คุณเห็นฉันกำลังส่งออกHomeส่วนประกอบ แต่ฉันได้รับข้อผิดพลาดในคอนโซลของฉันว่าสิ่งนี้

ใส่คำอธิบายภาพที่นี่

เกิดอะไรขึ้น?

คำตอบ:


263

ข้อผิดพลาดกำลังแจ้งว่าคุณนำเข้าไม่ถูกต้อง รหัสที่คุณมีตอนนี้:

import { Home } from './layouts/Home';

ไม่ถูกต้องเนื่องจากคุณกำลังส่งออกเป็นการส่งออกเริ่มต้นไม่ใช่เป็นการส่งออกที่มีชื่อ ตรวจสอบบรรทัดนี้:

export default Home;

คุณกำลังส่งออกเป็นค่าเริ่มต้นไม่ใช่ในชื่อ ดังนั้นนำเข้าHomeดังนี้:

import Home from './layouts/Home';

สังเกตว่าไม่มีวงเล็บปีกกา อ่านเพิ่มเติมเกี่ยวกับและimportexport


1
หรือคุณสามารถทำการส่งออกที่ตั้งชื่อได้ อดีต ส่งออก {Home};
Abhinav Singi

1
@AbhinavSingi ใช่ แต่เป็นแบบแผนและปฏิบัติกันอย่างแพร่หลายในการส่งออกส่วนประกอบเป็นการส่งออกเริ่มต้นของโมดูล แถมไม่มีการส่งออกอื่น ๆ
Andrew Li

ใช่แล้ว @AndrewLi เราก็ปฏิบัติตามเช่นกัน :)
Abhinav Singi

น่ากลัวมากที่จะห่อด้วยวงเล็บปีกกาเมื่อเทียบกับเอกพจน์ดังที่เห็นที่นี่
TheBlackBenzKid

2
@TheBlackBenzKid ใช่หากคุณมีการส่งออกหลายรายการให้ใช้รายการที่มีชื่อ จากนั้นนำเข้าโดยใช้ชื่อนั้นตามที่เห็นในเอกสาร MDN ที่เชื่อมโยง
Andrew Li

11

ใช้

import Home from './layouts/Home'

ค่อนข้างมากกว่า

import { Home } from './layouts/Home'

ลบออก{}จากหน้าแรก


10
สิ่งนี้เพิ่มอะไรอีกในคำตอบที่มีอยู่
Andrew Li

4

นี่เป็นกรณีที่คุณผสมการส่งออกเริ่มต้นและการส่งออกที่มีชื่อ

เมื่อจัดการกับการnamedส่งออกหากคุณพยายามนำเข้าคุณควรใช้วงเล็บปีกกาดังต่อไปนี้

import { Home } from './layouts/Home'; // if the Home is a named export

ในกรณีของคุณบ้านถูกส่งออกเป็นค่าเริ่มต้น นี่คือสิ่งที่จะนำเข้าจากโมดูลเมื่อคุณไม่ได้ระบุชื่อของโค้ดบางส่วน เมื่อคุณนำเข้าและละเว้นวงเล็บปีกกาจะมองหาการส่งออกเริ่มต้นในโมดูลที่คุณนำเข้า ดังนั้นการนำเข้าของคุณควรเป็น

import Home from './layouts/Home'; // if the Home is a default export

ข้อมูลอ้างอิงบางส่วนที่ต้องดู:


1

ฉันเพิ่งพบข้อความแสดงข้อผิดพลาดนี้ (หลังจากอัปเกรดเป็น nextjs 9 การนำเข้าที่โปร่งใสบางรายการเริ่มให้ข้อผิดพลาดนี้) ฉันจัดการเพื่อแก้ไขโดยใช้ไวยากรณ์ดังนี้:

import * as Home from './layouts/Home';

1

เรายังสามารถใช้

import { Home } from './layouts/Home'; 

ใช้คีย์เวิร์ดส่งออกก่อนคีย์เวิร์ดคลาส

export class Home extends React.Component{
    render(){
        ........
    }
}

สำหรับค่าเริ่มต้น

 import Home from './layouts/Home'; 

คลาสการส่งออกเริ่มต้น

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

ทั้งสองกรณีไม่จำเป็นต้องเขียน

export default Home;

หลังเลิกเรียน.


0

คุณสามารถใช้สองวิธีในการแก้ไขปัญหานี้วิธีแรกที่ฉันคิดว่าเป็นวิธีที่ดีที่สุดคือแทนที่ส่วนการนำเข้าของรหัสของคุณด้วยการร้อง:

import Home from './layouts/Home'

หรือส่งออกส่วนประกอบของคุณโดยไม่มีค่าเริ่มต้นซึ่งเรียกว่าการส่งออกเช่นนี้

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export {Home};

0

นี่คือวิธีแก้ปัญหา:

  • ไปที่ไฟล์ Home.js
  • ตรวจสอบให้แน่ใจว่าคุณส่งออกไฟล์ของคุณในส่วนท้ายของไฟล์:
export default Home;

ดูเหมือนจะไม่ใช่คำตอบที่ดีและน่าจะถูกลดคะแนนลง โปรดอ่านวิธีตอบก่อนที่คุณจะโพสต์ anwer อื่น โดยทั่วไปคุณไม่ควรตอบคำถามเก่าพร้อมคำตอบอื่น ๆ อีกมากมายเว้นแต่คุณจะสามารถเพิ่มสิ่งใหม่ที่คำตอบอื่นทำไม่ได้ รวมรหัสด้วย
finnmglas
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.