Question

我是React的新手，但遇到此错误。根据我所做的研究，似乎文件路径应该只是其中的一部分，但我检查了我的文件，一切似乎都很好。

./ src / components / Contacts.js找不到模块：无法解析 'C：\ Users \ brand \ Desktop \ files \ js \ react \ project3 \ contactmanager \ node_modules \ react-scripts \ node_modules \ babel-loader \ lib \ index.js' 在“ C：\ Users \ brand \ Desktop \ files \ js \ react \ project3 \ contactmanager”中

我的文件布局是

src/ 
 App.js  
 components/   
  Contact.js   
  Contacts.js  
  Header.js

Contacts.js的代码

import React, { Component } from 'react'
import Contact from './Contact'; 

class Contacts extends Component {

    constructor(){
        super(); 
        this.state = {
            contacts:[
                {
                    id:1, 
                    name:'brandon', 
                    email:'b@gamil.com', 
                    phone:'555-555-5555'
                },
                {
                    id:2, 
                    name:'daphne', 
                    email:'d@gamil.com', 
                    phone:'555-555-5555'
                },
                {
                    id:3, 
                    name:'finn', 
                    email:'f@gamil.com', 
                    phone:'555-555-5555'
                }
            ]
        }
    }

  render() {
    const {contacts} = this.state; 

    return (
      <div>
        {contacts.map(contact=>(
            <Contact 
                name={contact.name}
                email={contact.email}
                phone={contact.phone}
            />
        ))}
      </div>
    )
  }
}

export default Contacts;

Contact.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Contact extends Component {
  render() {
    const { name, email, phone } = this.props;

    return (
      <div className="card card-body mb-3">
        <h4>{name}</h4>
        <ul className="list-group">
          <li className="list-group-item">
            Email:
            {email}
          </li>
          <li className="list-group-item">
            Phone:
            {phone}
          </li>
        </ul>
      </div>
    );
  }
}

Contact.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  phone: PropTypes.string.isRequired
};

export default Contact;

App.js

import React, { Component } from 'react';
import Header from './components/Header';
import Contacts from './components/Contacts'; 

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header branding="Contact Manager" />
        <div className="container">
          <Contacts />
        </div>
      </div>
    );
  }
}

export default App;

此外，我使用create-react-app开始该项目。

我花了一些时间来解决这个问题，所以我希望这不仅仅是一个简单的拼写错误。

Answer 1

检查contact.js中的代码，从react导入'React'后忘记用分号结束。

找不到反应模块-无法解决问题

1 个答案: