Javascript 列表项通过删除

我在React中有todo列表，我可以删除todo-s，但我想对已完成的todo应用删除。在此之后，最好将它们列为已完成。怎么可能呢？我应该在代码中更改什么？我试图使用数组中的对象，但这会导致差异，错误

import React, { Component } from 'react';


class ToDoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      items: ''
      };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemove = this.handleRemove.bind(this);

  }

  handleChange(event) {
    this.setState({items: event.target.value})
    console.log(event.target.value);
  }

  handleSubmit(event) {
    this.setState({
      list: [...this.state.list, this.state.items],
      items: ''
    })
    event.preventDefault();
  }


  handleRemove(index) {
    const filteredArray = this.state.list.filter((_, i) => i !== index); // used underscore as a convention to address nothing is going there
    this.setState({
      list: filteredArray
    });
  }

  render() {
    return (
    <div className='header main'>
      <form onSubmit={this.handleSubmit} >
        <label>
          <input className='new-todo'
            placeholder='What needs to be done?'
            type="text"
            value={this.state.items}
            onChange={this.handleChange} />
        </label>
      </form>
      <ul className='todo-list'>
        {this.state.list.map((item, index) => (
            <li className='list-view' key={index+1}>{item}<button className='list-view-button' onClick={this.handleRemove.bind(this, index) }>X</button></li>
        ))}
      </ul>
      <div className='footer'>
        Remaining: {this.state.list.length}
      </div>
      </div>
    );
  }
}

export default ToDoList;

---

目前，您只有一个表示TODO的字符串数组

我会为您的项目执行以下操作：

项目：[ { 描述：待办事项内容， 现状：新 }, { 描述：待办事项内容， 状态：已完成 }, { 描述：待办事项内容， 状态：已存档 } ];

现在，当您在TODO中循环时，可以检查不同设计显示的状态

或者，您可以筛选TODO，以了解具体状态， 即：

this.state.items.filteritem=>item.status==new

这只会给你新的任务