Блог

У меня ошибка, модуль не найден. Я думаю, что такая ошибка из-за отсутствия файла или каталога.Однако я проверил более 30 раз в этом конкретном месте и даже на наличие опечаток, я не думаю, что у меня здесь какая-то ошибка.

Вот мой код для DishdetailComponent.js

 import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';

 class Dishdetail extends Component{
  constructor(props){
   super(props);
}
render(){
 if(this.props.dish!=null){
  return(
        <div className="container">
           <div className="row">
             <div className="col-12 col-md-5 m-1">
                <Card>
                  <CardImg width="100%" object src={dish.image} alt={dish.name} />
                  <CardBody>
                  <CardTitle>{dish.name}</CardTitle>
              <CardText>{dish.description}</CardText>
                  </CardBody>
                 </Card>
             </div>
           </div>
        </div>
)    
          }
           else{
            return <div></div>
           }

     }
   }
  export default Dishdetail;
  

Я вызываю этот компонент из Menucomponent.js файл.Он имеет следующий код:

 import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';
import Dishdetail from './Components/DishdetailComponent';

class Menu extends Component{
constructor(props){
    super(props);

    this.state={
        selectedDish:null
    };
}
  render() {
    const menu = this.props.dishes.map((dish) => {
        return (
          <div key={dish.id} className="col-12 col-md-5 m-1">
            <Card onClick={()=>this.onDishSelect(dish)}>
                  <CardImg width="100%" object src={dish.image} alt={dish.name} />
              <CardImgOverlay>
                <CardTitle>{dish.name}</CardTitle>
              </CardImgOverlay>
            </Card>
          </div>
        );
    });

    return (
      <div className="container">
        <div className="row">
         {menu}
        </div>
          {/* {this.renderDish(this.state.selectedDish)} */}
          <Dishdetail dish={this.state.selectedDish}/>
      </div>
    );
    }
   }
     export default Menu;
  

Иерархия моего кода выглядит следующим образом,

   -src(folder)
    -Components(sub-folder)
      -menucomponent.js
      -DishdetailComponent.js
  

Файл, который я хочу импортировать, и файл, который будет получен, находятся в одной папке Components.

Учитывая вашу структуру папок, которую вы предоставили, не menuComponent и dishDetailComponent находятся в одной папке? возможно, вам нужно изменить строку импорта на

 import Dishdetail from './DishdetailComponent';
  

поскольку это относительный путь к файлу, из которого вы вызываете импорт.

Взглянув на вашу структуру папок,

Оба компонента находятся в одном каталоге.

Затем вам придется импортировать его как

 import Dishdetail from "./DishdetailComponent";
  

Чтобы избежать такого рода накладных расходов на импорт, вы можете упростить его, добавив файл jsconfig.json в свой корневой каталог и сконфигурировав, как показано ниже.

 {
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }
  

Это для указания абсолютного пути импорта, и теперь вы можете импортировать его следующим образом

 import Dishdetail from "Components/DishdetailComponent";
  

Вы поместили MenuComponent и компонент DishDetail в одну папку, поэтому вы можете сделать

 import Dishdetail from "./DishdetailComponent"
  

Вы должны использовать относительный путь, поскольку оба ваших компонента находятся в одной папке, а
./ указывает программе искать в той же папке, в которой находится текущий файл. Поскольку вы используете ./ в MenuComponent, который находится в папке Components, ./ просматривается внутри папки components.

./Components/DishdetailComponent выполняет поиск в каталоге компонентов в папке, в которой находится MenuComponent, и, поскольку в этой папке такого каталога нет, выдает ошибку.

Кажется, оба файла находятся на одном уровне, Попробуйте использовать

import Dishdetail from './DishdetailComponent';