Javascript 筛选数组以删除项

我正在尝试使用过滤器从数组中删除对象。当我单击最近添加的项目时，它将console.log项目id，但不会从数组中删除该项目，不确定哪里出错

import React, { Component } from 'react'
import { reduxForm } from 'redux-form'
// import Input from '../forms/Input/Input'
import actions from './actions'
import { connect } from 'react-redux'
import styles from './Catalogue.styl'
 // import Checklist from './Checklist/Checklist'

@reduxForm({
  form: 'orderReview',
})
@connect(null, actions)

export default class Catalogue extends Component {
  constructor() {
    super()
    this.state = {
      filterText: '',
      favourites: [],
    data: [
    { id: 1, label: 'baguettes' },
    { id: 2, label: 'bread' },
    { id: 3, label: 'potatoes' },
    { id: 4, label: 'rice' },
    { id: 5, label: 'pasta' },
    { id: 6, label: 'chicken' },
    { id: 7, label: 'beans' },
    { id: 8, label: 'apples' },
    { id: 9, label: 'oranges' },
    { id: 10, label: 'grapes' },
    { id: 11, label: 'biscuits' },
  ],
}
}

handleFilterUpdate = event => {
  this.setState({
    filterText: event.target.value,
  })
}

addFavourite = (id) => {
  const favList = this.state.favourites.concat([id])
  this.setState({
    favourites: favList,
  })
  console.log(id)
 }

 removeFavourite = (id) => {
   console.log(id)
   const removeFav = this.state.favourites.filter((_, i) => i !== id)
     this.setState({
       favourites: removeFav,
     })
   }

  render() {
    const {
      data,
      filterText,
      favourites,
    } = this.state

   const NamesList = props => (
     <div>
     {props.data.filter(items => {
      return items.label.toLowerCase().indexOf(filterText.toLowerCase()) >= 0
    })
    .map(item => {
      return (
        <div
          key={item.id}
          onClick={() => props.addFavourite(item.id)}
        >
          {item.label}
        </div>
        )
      }
      )
    }

  </div>
)

const SaveName = props => {
  const idList = props.favourites.map(id => {
    const { label } = data[id]
    return (
      <div>
        <br />
        <li key={id} onClick={() => props.removeFavourite(data[id])}>{label}</li>
      </div>
    )
  })
  return (
    <div>{idList}</div>
  )
}

return (
  <div>
    <div className={styles.filtersList}>
      <ul className={styles.filtersUl}>
        <li className={styles.filtersLi}>znacky</li>
        <li className={styles.filtersLi}>zeme</li>
        <li className={styles.filtersLi}>Specialni</li>
      </ul>
    </div>

    <input
      type="text"
      value={filterText}
      onChange={this.handleFilterUpdate}
      placeholder="Hledat podle nazvu"
    />
    <NamesList data={data} addFavourite={this.addFavourite}/>
    {filterText}
    <SaveName favourites={favourites} removeFavourite={this.removeFavourite} />
  </div>
)
}
}

import React，{Component}来自“React”
从“redux表单”导入{reduxForm}
//从“../forms/Input/Input”导入输入
从“/actions”导入操作
从“react redux”导入{connect}
从“./catalog.styl”导入样式
//从“./检查表/检查表”导入检查表
@红肿({
表格：'orderReview'，
})
@连接（空，操作）
导出默认类目录扩展组件{
构造函数（）{
超级（）
此.state={
筛选器文本：“”，
收藏夹：[]，
数据：[
{id:1，标签：'baguettes'}，
{id:2，标签：'bread'}，
{id:3，标签：'马铃薯'}，
{id:4，标签：'rice'}，
{id:5，标签：'意大利面'}，
{id:6，标签：'鸡肉'}，
{id:7，标签：'beans'}，
{id:8，标签：'苹果'}，
{id:9，标签：'oranges'}，
{id:10，标签：'葡萄'}，
{id:11，标签：'饼干'}，
],
}
}
handleFilterUpdate=事件=>{
这是我的国家({
filterText:event.target.value，
})
}
addFavorite=（id）=>{
const favList=this.state.favorites.concat（[id]）
这是我的国家({
最爱：favList，
})
控制台日志（id）
}
RemoveFavorite=（id）=>{
控制台日志（id）
const removeFav=this.state.favorites.filter（（（uu，i）=>i！==id）
这是我的国家({
最爱：removeFav，
})
}
render（）{
常数{
数据，
过滤文本，
最受欢迎的，
}=这个州
const NamesList=props=>(
{props.data.filter（items=>{
return items.label.toLowerCase（）.indexOf（filterText.toLowerCase（））>=0
})
.map（项目=>{
返回(
props.addFavorite（item.id）}
>
{item.label}
)
}
)
}
)
const SaveName=props=>{
const idList=props.favorites.map（id=>{
常量{label}=data[id]
返回(


props.removeFavorite（数据[id]）}>{label}
)
})
返回(
{idList}
)
}
返回(

znacky
zeme
Specialni

{filterText}
)
}
}

您正在迭代整个数组，并将参数

id

与当前处理的数组项的索引进行比较

相反，将

item.id

与参数进行比较，而不是与

i

进行比较：

MyApp类扩展了React.Component{ 构造函数（）{ 超级（） 此.state={ 最爱：[ {id:1，标签：'baguettes'}， {id:2，标签：'bread'}， {id:3，标签：'马铃薯'}， {id:4，标签：'rice'}， {id:5，标签：'意大利面'}， {id:6，标签：'鸡肉'}， {id:7，标签：'beans'}， {id:8，标签：'苹果'}， {id:9，标签：'oranges'}， {id:10，标签：'葡萄'}， {id:11，标签：'饼干'}， ], } } RemoveFavorite=（id）=>{ const removeFav=this.state.favorites.slice（）； 拆下FAV.接头（id，1）； 这是我的国家({ 最爱：removeFav }) } render（）{ 返回(

{this.state.favorites.map（（item，i）=>
• {item.label}Remove
）}

); } } ReactDOM.render（，document.getElementById（“myApp”）

过滤器回调中没有返回任何内容。因此，您的

removeFav

为空。使用

.filter（（u，i）=>{return i！==id；}）

您不应该直接修改您的状态，因为您使用

concat

添加收藏夹。相反，请尝试使用

this.setState（（prev，props）=>（{}））

定义来使用前面的state@Bjoern这是不对的，用简单的表达式，比如

i！==id

，返回值是隐式的，没有卷曲braces@m_callens所以我也学到了一些东西。谢谢RemoveFavorite不应该更像：

RemoveFavorite=id=>this.setState（prevState=>（{Favorites:prevState.Favorites.filter（item=>item.id！==id）}））

？@PeterLaCombJr。嗯，有什么区别吗？谢谢你提供了这个例子，虽然我在实现它时遇到了困难，但看起来它还是可以工作的，但是我还是需要重构代码来实现它immutability@chris-此示例很简单，但在更复杂的应用程序中，您必须处理状态更新中的异步：