任何人都可以告訴我為什么我無法刪除待辦事項列表中的項目？

Question

我有反應todo列表的問題。

提交時，列表項似乎沒問題。

然后我應該能夠刪除這個點擊該項目，但沒有任何反應。 一旦我嘗試添加另一個項目，頁面刷新並刪除所有項目？

控制台日志只顯示

[對象]

---

應用

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不是一個函數，它會使應用程序崩潰。