反應錯誤“嘗試導入錯誤：'TodoItem'未從'./Todoitem'導出。”

Question

我附上了這兩個文件的代碼

這是 Todos.js `

import React from 'react'
import {TodoItem} from "./Todoitem";
export const Todos = (props) => {
return (
    <div className="container">
        <h3 className="text-center my-5">Todos list</h3>
        {props.todos.map((todo)=>{
            return <TodoItem todo={todo} onDelete={props.onDelete}/>
        })}
    </div>
)}

`

它是 Todoitem.js

`

import React from 'react';
export  const Todoitem = ({todo,  onDelete}) => {
return (
    <div>
        <h4 >{todo.title}</h4>
        <p  >{todo.description}</p>
        <button className= "btn btn-danger" onClick={onDelete}>Delete</button>    
    </div>
)}

`請幫忙

Answer 1

我認為這是因為您將導出命名為Todoitem而不是TodoItem 。

因此，以下應該有效。

import React from 'react'
import {TodoItem} from "./Todoitem";
export const Todos = (props) => {
return (
    <div className="container">
        <h3 className="text-center my-5">Todos list</h3>
        {props.todos.map((todo)=>{
            return <TodoItem todo={todo} onDelete={props.onDelete}/>
        })}
    </div>
)}

// TodoItem component
import React from 'react';
// you have named the below as Todoitem instead of TodoItem
export  const TodoItem = ({todo,  onDelete}) => {
return (
    <div>
        <h4 >{todo.title}</h4>
        <p  >{todo.description}</p>
        <button className= "btn btn-danger" onClick={onDelete}>Delete</button>    
    </div>
)}

Answer 2

您必須將您的 Todos.js 文件更新為此

import React from 'react'
import {Todoitem} from "./Todoitem"; // Changed TodoItem to Todoitem
export const Todos = (props) => {
return (
    <div className="container">
        <h3 className="text-center my-5">Todos list</h3>
        {props.todos.map((todo)=>{
            return <TodoItem todo={todo} onDelete={props.onDelete}/>
        })}
    </div>
)}