Question

问题

因此，正如标题所述，我在todoapp中遇到了这个问题。我检查了我是否有像react这样的错字而不是React，这似乎还可以。

在发布我检查过的东西之前

但是我找不到解决方法

代码

App.js

import React, {Component} from 'react';
import Form from './Components/Form';
import Footer from './Components/Footer';
import Header from './Components/Header';


class App extends React{
  constructor(props) {
      this.state = {
          todoValue: "",
          filterType: "All",
          todos: [],
      }
  }

  handleChange = (event) => {
      this.setState({
          todoValue: event.target.value,
      })
  }

  handleClick = (event) => {
      event.preventDefault();
      if (this.state.todoValue !== "") {
          const todo = {
              id: Date.now(),
              text: this.state.todoValue,
              done: false,
          }
          this.setState({
              todoValue: "",
              todos: [todo, ...this.state.todos],
          })
      }
  }

  handleToggle = (id) => {
      this.setState((prevState) => {
          return {
              todos: prevState.todos.map((item, i) => {
                  if (item.id === id) {
                      return {
                          ...item,
                          done: !prevState.todos[i].done,
                      }
                  }
                  return item;
              })
          }
      })
  }

  handleDelete = (id) => {
      this.setState({
          todos: this.state.todos.filter(item => item.id !== id)
      })
  }

  deleteCompleted = () => {
      this.setState({
          todos: this.state.todos.filter(item => !item.done)
      })
  }

  getVisibleTodos = () => {
      const filterType = this.state.filterType;
      let filterState = null;
      switch (filterType) {
            case "Completed":
                return filterState = this.state.todos.filter(item => item.done);
            case "Active":
                return filterState = this.state.todos.filter(item => !item.done);
            case "Originals":
                return filterState = this.state.todos.filter(item => !item.done);
            case "New":
                return filterState = this.state.todos.filter(item => !item.done);
            default:
                 return filterState = this.state.todos;
      }
  }

  setActiveFilter = (text) => {
      this.setState({
          filterType: text,
      })
  }

  render() {
      return (
          <div className="container">
              <Header countTodo={this.state.todos.length}/>
              <Form handleDelete={this.handleDelete} 
                   handleToggle={this.handleToggle}
                   handleClick={this.handleClick} 
                   handleChange={this.handleChange} 
                   todoValue={this.state.todoValue} 
                   todos={this.getVisibleTodos()}/>
              <Footer setActiveFilter={this.setActiveFilter} 
                   deleteCompleted={this.deleteCompleted} 
                   filter={this.state.filterType}/>
          </div>
      )
  }
}

export default App;

Header.js

import React from 'react';

class Header extends React.Component {
    render() {
        return (
            <header className="header">
                <h3>All To-Do {this.props.countTodo}</h3>
            </header>
        )
    }
}

export default Header;

Form.js

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

class Form extends React {
    render() {
        return (
            <form className="form">
                <input type="text"
                    className="form__input" 
                    placeholder="Items" 
                    onChange={this.props.handleChange} 
                    value={this.props.todoValue}
                    />

                <button 
                    className="form__button"
                    type="submit" 
                    onClick={this.props.handleClick}>╋</button>

                <Todo 
                    todos={this.props.todos} 
                    handleToggle={this.props.handleToggle} 
                    handleDelete={this.props.handleDelete}
                    />
            </form>
        )
    }
}

export default Form;

最后一个模块是Todo.js

import React, {Component} from 'react';

class Todo extends React{
    render() {
        return (
            <ul className="todos-list">
                {
                    this.props.todos.map((item) => {
                        return (
                            <li className="todo-item" 
                                key={item.id} onClick={() => this.props.handleToggle(item.id)}>
                                <span 
                                    className={item.done ? "todo-item__name disabled" : "todo-item__name"}>
                                    {item.text}
                                </span>
                                <span 
                                    className="todo-item__delete-button" 
                                    onClick={() => this.props.handleDelete(item.id)}>
                                    ×
                                </span>
                            </li>
                        )
                    })


                }
            </ul>
        )
    }
}

export default Todo;

Answer 1

您的类应该从您从React库中导入的Component扩展。

应该是

class App extends Component{}

或者，如果您没有导入Component，则

class App extends React.Component{}

Answer 2

您没有正确扩展您的App组件

class App extends React{ // error here

  constructor(props) {
      this.state = {
          todoValue: "",
          filterType: "All",
          todos: [],
      }
  }

从React.Component

扩展它

class App extends React.Component {
  constructor(props) {
      super(props); // use super here
      this.state = {
          todoValue: "",
          filterType: "All",
          todos: [],
      }
  }

错误：超级表达式必须为null或函数

2 个答案: