Question

嘿所以我一直试图让这段代码工作，但我似乎无法弄清楚最后一件事，那就是我如何使用fetch方法删除数据库中的项目。

我想从当前点击的项目获取id并使用我创建的删除按钮将其删除。

class Datatest extends Component {
  constructor() {
    super();
    this.state = {
      todolist: []
    }
    this.addTodo = this.addTodo.bind(this);
  }
  // GET items from API
  componentDidMount() {
    fetch('/api/todolist')
    .then(res => res.json())
    .then((results)=> {    
      console.log(results)
      this.setState({todolist:results})
    })   
}

  deleteTodo(id){

      fetch('/api/todolist/' + id, {
          method: 'DELETE',
          mode: 'CORS'
      }).then(res => res)
  }


  render() {
    // mapping through todolist items
    const todo = this.state.todolist.map((item) => (
      <div className="todoitem" key={item._id}>
        <h3>{ item._id }</h3>
        <div className="delete-button"><img src={trashcan} alt="trashcan" onClick={this.deleteTodo} /></div>
      </div>

    ));
    return (
      <div className="test">
        <div className="todoitems-container">
          {todo}
          <div className="delete-item"></div>  
        </div>
        <form onSubmit={this.addTodo}>
          <input type="text" ref="title" />
          <input type="submit" />
        </form>


      </div>
    );
  }
}

export default Datatest;

Answer 1

使用箭头功能调用您的id：

处理程序

const todo = this.state.todolist.map((item) => (
    <div className="todoitem" key={item._id}>
        <h3>{ item._id }</h3>
        <div className="delete-button">
            <img 
                src={trashcan} 
                alt="trashcan" 
                onClick={() => this.deleteTodo(item._id)}
            />
        </div>
    </div>
));

这将为数组中的每个项创建一个匿名处理函数，该函数使用正确的id调用处理程序。

Answer 2

其中任何一个都应该有效：

    <div className="delete-button"><img src={trashcan} alt="trashcan" onClick={(e) => this.deleteTodo(item._id, e} /></div>

或：

    <div className="delete-button"><img src={trashcan} alt="trashcan" onClick={this.deleteTodo.bind(this, item._id)} /></div>

Answer 3

React方法是通过创建相关组件来模块化您的视图 - 在您的情况下，我建议同时创建<TodoItem />和<TodoList />组件。

class TodoItem extends PureComponent {

  handleDeleteClick = () => this.props.onDelete(this.props.id)

  render() {
    return (
      <div className="todoitem">
        <h3>{this.props.id}</h3>
        <div className="delete-button"><img src={trashcan} alt="trashcan" onClick={this.handleDeleteClick} /></div>
      </div>
    );
  }
}

class TodoList extends Component {
  render() {
    return (
      <div className="test">
        <div className="todoitems-container">
          {this.props.items.map(i => <TodoItem
            key={i._id}
            id={i._id}
            onDelete={this.props.onDeleteItem}
          />)}
          <div className="delete-item"></div>  
        </div>
       </div>
      </div>
    );
  }
}

class Datatest extends Component {

  deleteTodo(id){
    fetch(`/api/todolist/${id}`, {
      method: 'DELETE',
      mode: 'CORS'
    }).then(res => res)
  }

  render() {
    return <TodoList 
      items={this.state.todolist}
      onDeleteItem={this.deleteTodo}
    />;
  }
}

这种方法还允许您对责任进行细分，即TodoItem负责传播自身的UI事件，TodoList负责将模型更改传播到容器。

Redux模式与React非常兼容，值得一看。

如何通过react和fetch方法删除特定项目的id

3 个答案: