Question

请耐心等待我，因为我是一名javascript新手，刚开始学习反应。

我正在尝试创建一个小应用程序，但我一直收到一个错误，我的某个文件找不到...具体来说：

bundle.js：56未捕获错误：找不到模块＆＃34; ./ components / search_bar＆＃34;

我的文件结构是我将index.js放在名为src的文件夹中，然后将我的搜索栏（search_bar.js）放在名为components的文件夹中。我已经三次检查了它们的拼写，但我仍然会收到此错误。

这是我的index.js

import SearchBar from './components/search_bar';
import React from 'react';
import ReactDOM from 'react-dom';
//Create a componant (some /HTML)

const API_KEY = 'AIzaSyC3Z3qTpvAacDLYEIxaueKflFJbWvdIHsw';

  const App = () => {
    return (
     <div>
      <SearchBar />
     </div>
   );
  }

// Put that componant on the page (the DOM)

ReactDOM.render(<App />, document.querySelector('.container'));

这是我的search_bar.js

import React, { Component } from 'react';

class SearchBar extends Component {
  contructor(props) {

    super(props);
    // when user updates the search bar this term will get updated.
    this.state = { term: ''};

  }

  render() {
    //update state
    //use set state everywhere besides constructor!!
    return (
      <div>
      <input onChange={event => this.setState({term: event.target.value})} 
/>
      Value of the input: {this.state.term}
      </div>
    );
  }

}


export default SearchBar;

关于我在这里做错了什么想法？

Answer 1

您能否确认以下目录结构？

my_project/src/index.js

my_project/src/components/search_bar.js

您的当前目录结构可能看起来像这样： my_project/src/index.js，my_project/components/search_bar.js

Answer 2

啊，我离开了一个＆＃39;超出构造函数...所以search_bar.js无法编译。我一直在看这个约一个小时......

Bundle.js无法识别我的一个文件？

2 个答案: