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

Posted 2023-02-22

【中文标题】React不会从数组中删除项目[重复]

【英文标题】：React does not delete item from array [duplicate]

【发布时间】：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 我刚试过这个。有用！谢谢。

【参考方案1】：

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

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

应该是

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

【讨论】：

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