Ошибка: супер-выражение должно быть либо нулевым, либо функцией - PullRequest
0 голосов
/ 18 февраля 2019

Задача

Так как в названии сказано, что у меня есть эта проблема в todoapp.я проверил, если бы у меня была какая-то опечатка типа react вместо React, и, кажется, все в порядке.

Перед тем, как что-то опубликовать, я проверил:

Первый пост stackoverflow

Второй постпополнение стека

, но я не могу найти решение

Код

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;

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Вы неправильно расширили свой компонент приложения

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: [],
      }
  }
0 голосов
/ 18 февраля 2019

Ваш класс должен расширяться от Компонента, который вы импортируете из библиотеки реагирования.

Это должно быть либо

class App extends Component{}

, либо, если вы не импортировали Компонент, тогда

class App extends React.Component{}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...