Question

我在应对待办事项列表方面遇到问题。

提交后，列表项看起来很好。

然后我应该能够通过单击该项目将其删除，但是什么也没有发生。一旦我尝试添加其他项目，页面就会刷新并且所有项目都被删除？

控制台日志仅显示

[对象对象]

应用

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
    this.addItems = this.addItems.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
  }

  addItems(e) {
    if (this._inputElement !== '') {
      let newItem = {
        text: this._inputElement.value,
        key: Date.now()
      };
      this.setState(prevState => {
        return {
          items: prevState.items.concat(newItem)
        };
      });
    }
    this._inputElement.value = '';
    e.preventDefault();
  }

  deleteItem(key) {
    console.log('key is' + key);
    console.log('itesm as' + this.state.items);
    var filteredItems = this.state.items.filter(function(item) {
      return item.key !== key;
    });
    this.setState = {
      items: filteredItems
    };
  }

  render() {
    return (
      <div className="app">
        <h2> things to do</h2>
        <div className="form-inline">
          <div className="header">
            <form onSubmit={this.addItems}>
              <input
                ref={a => (this._inputElement = a)}
                placeholder="enter task"
              />
              <button type="submit">add</button>
            </form>
          </div>
        </div>
        <TodoItem entries={this.state.items} delete={this.deleteItem} />
      </div>
    );
  }
}
export default App;

todoItem

import React, { Component } from 'react';

//search bar
class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.createTasks = this.createTasks.bind(this);
  }
  createTasks(item) {
    return (
      <li onClick={() => this.delete(item.key)} key={item.key}>
        {item.text}
      </li>
    );
  }
  delete(key) {
    console.log('key is ' + key);
    this.props.delete(key);
  }
  render() {
    let todoEntries = this.props.entries;
    let listItems = todoEntries.map(this.createTasks);
    return <ul className="theList">{listItems}</ul>;
  }
}

export default TodoItem;

Answer 1

您要分配给setState，而不是将其用作原来的方法

更改

this.setState = {
  items: filteredItems
};

到

this.setState({
  items: filteredItems
});

这也是它重新加载应用程序的原因，因为您已经覆盖了setState方法，您应该会得到一个错误，表明setState不是一个函数，它将导致应用程序崩溃。 / p>

谁能告诉我为什么我无法从待办事项列表中删除一个项目？

1 个答案: