reactjs - React 项目中未定义 App.js

Question

我正在 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;

标签： reactjs

Answer 1

你需要的答案在这里

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

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>    
      );
    }
  };
}