javascript - 过滤数组以删除项目 react

Question

我正在尝试使用过滤器从数组中删除一个对象。当我单击最近添加的项目时，它会 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>
)
}
}

Answer 1

您正在迭代整个数组，并将参数 id 与数组当前处理的项目的索引进行比较。

相反，将 item.id 与参数进行比较，而不是与 i:

class MyApp extends React.Component {

  constructor() {
    super()
    this.state = {
      favourites: [
        { 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' },
      ],
    }
  }

  removeFavourite = (id) => {
    const removeFav = this.state.favourites.slice();
    removeFav.splice(id, 1);
    this.setState({
      favourites: removeFav
    })
  }

  render() {
    return(
      <ul>
        {this.state.favourites.map((item, i) => <li key={item.id}>{item.label} <button onClick={this.removeFavourite.bind(this, i)}>Remove</button></li>)}
      </ul>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

<小时/>

或者，您也可以使用 splice() 直接删除项目:

class MyApp extends React.Component {

  constructor() {
    super()
    this.state = {
      favourites: [
        { 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' },
      ],
    }
  }

  removeFavourite = (id) => {
    const removeFav = this.state.favourites.filter(item => item.id-1 != id)
    this.setState({
      favourites: removeFav
    })
  }

  render() {
    return(
      <ul>
        {this.state.favourites.map((item, i) => <li key={item.id}>{item.label} <button onClick={this.removeFavourite.bind(this, i)}>Remove</button></li>)}
      </ul>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>