React 项目中未定义 App.js

Posted 2023-02-22

【中文标题】React 项目中未定义 App.js

【英文标题】：App.js is not defined in react project

【发布时间】：2019-02-01 05:19:40

【问题描述】：

我正在用 reactJS 框架构建一个项目，当我有一个大类应用程序时，我决定分成几个类。更改后我可以看到以下错误

“应用”未定义

谁能帮我解决这个问题？

我尝试了所有 webpack 设置，但没有帮助。它仅在划分“App”类之后出现，但在它正常工作之前。

这是我的代码。

import React,  Component  from 'react';
import './App.css';

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

    this.state = 
      list,
      searchTerm: "",
    ;

    this.onDismiss = this.onDismiss.bind(this);
    this.onSearchChange = this.onSearchChange.bind(this);
  

  onSearchChange(event)
    this.setState( searchTerm: event.target.value );
  

  onDismiss(id) 
  const isNotId = item => item.objectID !== id;
  const updatedList = this.state.list.filter(isNotId);
  this.setState( list: updatedList );
  

  render() 
    const  searchTerm, list  = this.state;
    return (
      <div className="App">
        <Search 
          value = searchTerm
          onChange = this.onSearchChange
        />
        <Table 
          list = list
          pattern = searchTerm
          onDismiss = this.onDismiss
        />  
      </div>    
    );
  



class Search extends Component 
  render()
    const  value, onChange  = this.props;
    return(
        <form>
          <input 
            type = "text"
            value = "value" 
            onChange = onChange
          />
        </form>      
    );
  



class Table extends Component 
  render()
    const  list, pattern, onDismiss  = this.props;
    return(
      <div>
        list.filter(isSearched(pattern)).map(item => 
          <div key=item.objectID>
            <span>
                <a href=item.url>item.title</a>
            </span>
            <span>item.author</span>
            <span>item.num_comments</span>
            <span>item.points</span>
            <span>
              <button onClick=() => onDismiss(item.objectID) type="button">
                Delete
              </button>
            </span>
          </div>
        )
      </div>    
      );
    
  ;


export default App;

【问题讨论】：

默认情况下您只导出 App，但 Search 和 Table 未导出，但您的 App 组件正在调用 Search 和 Table。因此，为了使其正常工作，您需要导出您的搜索和表格组件，如导出类搜索扩展组件，如明智的导出类表扩展组件

"App is not defined" 这是 webpack 错误，还是您在 javascript 控制台中看到的错误？您发布的所有代码是否都在一个文件中？

这不是所有的代码。我在控制台中看到了这个错误。这不是所有的代码

@Vlad Nemyrovsky 如果它解决了您的问题，请点赞并接受答案，这样线程将被关闭，这将有助于未来的读者

【参考方案1】：

您需要的答案是here

我想解释几件事。在下面的代码中检查我的 cmets

import React,  Component  from 'react';
import './App.css'; // have proper naming conventions change it to lowercase app.css

export default class App extends Component 
  constructor(props)
    super(props);

    this.state = 
      list,
      searchTerm: "",
    ;

    //Manual binding are ok but if you use arrow function you can stay away with scope related issues like let that = this;
    //this.onDismiss = this.onDismiss.bind(this);
    //this.onSearchChange = this.onSearchChange.bind(this);
  

  onSearchChange = (event) => 
    this.setState( searchTerm: event.target.value );
  

  onDismiss = (id) => 
  const isNotId = item => item.objectID !== id;
  const updatedList = this.state.list.filter(isNotId);
  this.setState( list: updatedList );
  

  render() 
    const  searchTerm, list  = this.state;
    return (
      <div className="App"> //Follow naming conventions chang classname App to app
        <Search 
          value = searchTerm
          onChange = this.onSearchChange
        />
        <Table 
          list = list
          pattern = searchTerm
          onDismiss = this.onDismiss
        />  
      </div>    
    );
  


//you need to export your component to make it available to other components

export class Search extends Component 
  render()
    const  value, onChange  = this.props;
    return(
        <form>
          <input 
            type = "text"
            value = "value" 
            onChange = onChange
          />
        </form>      
    );
  


//you need to export your component to make it available to other components

export class Table extends Component 
  render()
    const  list, pattern, onDismiss  = this.props;
    return(
      <div>
        list.filter(isSearched(pattern)).map(item => 
          <div key=item.objectID>
            <span>
                <a href=item.url>item.title</a>
            </span>
            <span>item.author</span>
            <span>item.num_comments</span>
            <span>item.points</span>
            <span>
              <button onClick=() => onDismiss(item.objectID) type="button">
                Delete
              </button>
            </span>
          </div>
        )
      </div>    
      );
    
  ;

【讨论】：

谢谢你的回答，当我按照你写的导出类时，我收到下一个：./src/App.js 语法错误：C:/wamp64/www/React/hackernews/hackernews/src /App.js: 'import' 和 'export' 只能出现在顶层 (74:0)

我删除了文件底部的导出默认值，并在 App 类之前添加。你能试试我更新的答案吗

知道了。问题出在你的 webpack 上。让我知道你的 webpack 代码

检查这个线程它有所有细节***.com/questions/37902849/…和babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/…

`-- webpack@3.8.1