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

Question

我对 React 待办事项列表有疑问。

提交后，列表项显示正常。

然后我应该可以通过单击该项目来删除它，但是没有任何反应。一旦我尝试添加另一个项目，页面就会刷新并且所有项目都被删除？

控制台日志只显示

[object object]

---

应用

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;

---

待办事项

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 不是一个函数，它会使应用程序崩溃。