React不会从数组中删除项目[重复]答案

【问题标题】：React does not delete item from array [duplicate]React不会从数组中删除项目[重复]
【发布时间】：2021-01-18 21:28:42
【问题描述】：

我正在 React 中创建一个简单的 todo 应用程序。我有三个组件。 'Items' 组件负责显示和删除列表中的项目。当我单击项目旁边的“完成”按钮时，项目的索引正在记录到控制台，但没有被删除。我的代码如下，

//App.js
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {list:[]}
    this.addItem = this.addItem.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
  }

  addItem(val) {
    let updated = [...this.state.list, val];
    this.setState({ list: updated });
  }
  
  handleRemove(key){ 
    const list = [...this.state.list]; 
  
    const updateList = list.filter(item => item.id !== key); 
  
    this.setState({ 
      list:updateList, 
    }); 
  
  } 

  render(){
    return (
    <div className="App">
      <Title itemCount={this.state.list.length}></Title>
      <Add addItem={this.addItem}></Add>
      <Items items={this.state.list} remove={this.handleRemove}></Items>
    </div>
  );
  }
  
}

//Items.js
const Items = ({items, remove}) => {
    return(
        <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item}
                    <button onClick={() => remove(index)}>Done</button>
                </li>
                )}
            </ul>
        </div>
    );
}

我能做些什么来解决这个问题？提前致谢！

【问题讨论】：

项目的内容是什么？可以分享一下数据结构吗？
检查字符串和数字的比较。有可能将字符串与过滤函数中的数字进行比较
您确定item.id 和key 具有相同的值和数据类型吗？您是否控制台记录了updateList？
如果我理解正确，您正在尝试使用索引进行删除，您可以尝试类似const updateList = list.filter((_, i) => i !== key) - 同时使用remove(index)
@Nick Parsons 我刚试过这个。有用！谢谢。

标签： javascript arrays reactjs

【解决方案1】：

您没有将 id 传递给 Items 组件中的回调

<button onClick={() => remove(index)}>Done</button>

应该是

<button onClick={() => remove(item.id)}>Done</button>

【讨论】：

这是删除所有项目。如何让他们删除我点击的项目？