检查数组是否存在于React中

时间:2017-07-24 09:46:56

标签: javascript arrays reactjs

我正在尝试检查数组data中是否存在某个项目,如果存在则阻止将其添加到数组中。

如果一个项目已经存在于数组中,handleCheck函数将返回true但我不知道如何使用它来阻止该项目被添加到数组中。

我试图在handlePush函数this.handleCheck(item) == false ?中使用它,它应该检查它是否为假,如果是,那么推,如果它返回true它应该说它存在但是此刻这不是因为它将推送到数组,即使该项存在,它将永远不会console.log'存在'

如何更改handlePush函数以使用handleCheck并防止再次添加数组中已存在的项?

https://www.webpackbin.com/bins/-KpnhkEKCpjXU0XlNlVm

import React from 'react'
import styled from 'styled-components'
import update from 'immutability-helper'

const Wrap = styled.div`
  height: auto;
  background: papayawhip;
  width: 200px;
  margin-bottom:10px;
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
    data: []
    }

    this.handlePush = this.handlePush.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
    this.handleCheck = this.handleCheck.bind(this)
  }

  handlePush(item) {

    this.handleCheck(item) == false ?
    this.setState({
    data: update(this.state.data, {
      $push: [
        item
      ]
    })
    })

   : 'console.log('exists')
  }

   handleRemove(index) {
    this.setState({
    data: update(this.state.data, {
      $splice: [
        [index,1]
      ]
    })
    })
  }

handleCheck(val) {
 return this.state.data.some(item => val === item.name);
}

  render() {
    return(
    <div>
        <button onClick={() => this.handlePush({name: 'item2'})}>push</button>
        <button onClick={() => this.handlePush({name: 'item3'})}>push item3</button>
        {this.state.data.length > 1 ? this.state.data.map(product => 
          <Wrap onClick={this.handleRemove}>{product.name}</Wrap>) : 'unable to map' } 
        {console.log(this.state.data)}
        {console.log(this.handleCheck('item2'))}
        {console.log(this.handleCheck('item3'))}
      </div>
    )

  }
}

3 个答案:

答案 0 :(得分:12)

它应该是:

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {

    let delete = UITableViewRowAction(style: .destructive, title: "", handler: {})

}

因为handleCheck(val) { return this.state.data.some(item => val.name === item.name); } 这里的对象不是字符串。

检查一下: https://www.webpackbin.com/bins/-Kpo0Rk6Z8ysenWttr7q

答案 1 :(得分:3)

在搜索 React的数组中是否存在检查值时,我进入了此页面,并想为其他认为有任何特殊情况的人提供解决方案(除此问题外)使用React检查数组中的值。

您也可以正确使用默认的JavaScript方法。关于React没有什么特别的。

var arr = ["steve", "bob", "john"];

console.log(arr.indexOf("bob") > -1); //true

谢谢。

答案 2 :(得分:2)

在数组实例上使用Uncaught TypeError: Cannot read property 'playerAmount' of null at poker.js:2方法。

includes()