从 React 中的数组中删除项目

IT技术 reactjs
2021-05-12 06:35:30

我的 removeItem 函数有问题(它应该删除当前<li>嵌套的按钮,以及 this.state.list 上的数组中的项目),目前没有代码,因为我尝试了很多东西,但没有任何效果,所以我最终console.logs看的是什么发生了所以我删除了它

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

class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            text: ''
        }
        this.textChange = this.textChange.bind(this);
        this.addToList = this.addToList.bind(this);
        this.removeItem = this.removeItem.bind(this);
    }

    textChange(e) {
        this.setState({
            text: e.target.value
        })
    }

    addToList() {
        this.setState(prevState => ({
            list: prevState.list.concat(this.state.text),
            text: ''
        }))
    }

    removeItem(e) { ?
        ? ? ? ? ? ? ?
    }

    render() {
        return(
          <div>
            <h1>My Todo List</h1>
            <h3>Add item</h3>
            <input value={this.state.text} onChange={e => this.textChange(e)}/>
            <button onClick={this.addToList}>+</button>
            <ul>{this.state.list.map((x,y) => {
              return <li key={y}>{x}
              <button onClick={this.removeItem}>-</button>
              </li>})}
            </ul>
          </div>
        )
    }
}

export default Todo;
4个回答

在我的解决方案中,例如:

const remove = (i) => {
        const arr = data.filter((item) => item.name !== i);
        setData(arr);
    };

我过滤了未删除的项目并再次设置状态

按索引从数组中删除项目

const newList = this.state.list.splice(index, 1);

按值从数组中删除项目

const newList = this.state.list.splice(this.state.list.indexOf(value), 1);

您可以按您想要的问题过滤您的列表,它将被自动删除,例如,如果您想删除所有 items = 3 :

列表: prevState.list.filter(x=> x != 3);

祝你好运!

removeItem(item) {
    const item = getItem(this.state.list, item.id) // Method to get item in list through comparison (IE: find some item with item.id), it has to return ITEM and INDEX in array
    const newlist = [].concat(list) // Clone array with concat or slice(0)
    newlist.splice(item.index, 1);
    this.setState({list: newlist});       
  }