Как исправить ошибку импорта в приложении reactJS? - PullRequest
Новая
       6

Как исправить ошибку импорта в приложении reactJS?

0 голосов
/ 12 апреля 2020

Я использую код Visual Studio для редактирования моего приложения реакции. Я пытался импортировать свой класс Wishlist из другого файла javascript.

Я заметил, что класс не был импортирован должным образом, поскольку мой import WishList from "../wishlist/wishlist"; в моем приложении. js файл выглядел прозрачным.

Это изображение содержит расположения папок, а также изображение моего import WishList from "../wishlist/wishlist";, импортируемого неправильно, поскольку оно выглядит прозрачным.

Код ниже - мой список пожеланий. js file. 

import React, { Component } from "react";
import "./wishlist.css";

class WishList extends Component {
  render() {
    return (
      <div className="card">
        <div className="card-block">
          <h4 className="card-title">Wish List</h4>
          <ul className="list-group"></ul>
        </div>
      </div>
    );
  }
}

export default WishList;

Приведенный ниже код содержит файл моего приложения. js, в котором используется компонент WishList. 

import React, { Component } from "react";
// import React from "react";
import logo from "./logo.svg";
import "./App.css";

//Components
import Product from "../product/product";
import WishList from "../wishlist/wishlist";

//Services
import HttpService from "../services/http-service";

const http = new HttpService();

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

    this.state = { products: [] };

    //Bind functions
    this.loadData = this.loadData.bind(this);
    this.productList = this.productList.bind(this);

    this.loadData();
  }

  loadData = () => {
    var self = this;
    http.getProducts().then(
      (data) => {
        self.setState({ products: data });
      },
      (err) => {}
    );
  };

  productList = () => {
    const list = this.state.products.map((product) => (
      <div className="col-sm-4" key={product._id}>
        <Product
          title={product.title}
          price={product.price}
          imgUrl={product.imgUrl}
        />
      </div>
    ));
    return list;
  };

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <div className="container-fluid App-main">
          <div className="row">
            <div className="col-sm-8">{this.productList()}</div>
            <div className="col-sm-4">
              <Wishlist />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Я проверил синтаксис моего списка желаний. js, а также моего приложения. js и все оказалось в порядке.

Я проверил import Product from "../product/product";, и он работал нормально, поэтому я не знаю, где может быть ошибка.

Как мне решить эту проблему?

...