从 React 数组中删除项目

我的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;

在我的解决方案中 例如：

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

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