检查数组 React 中是否存在项目答案

【问题标题】：Check if item exists in array React检查数组 React 中是否存在项目
【发布时间】：2017-12-29 20:17:48
【问题描述】：

我正在尝试检查我的数组 data 中是否存在某个项目，如果存在则阻止它被添加到数组中。

handleCheck 函数将在数组中已存在项目时返回 true，但我不知道如何使用它来防止将项目添加到数组中。

我试图在handlePush 函数this.handleCheck(item) == false ? 中使用它，它应该检查它是否为假，如果是，则推送，如果它返回真，它应该说它存在，但目前它不能正常工作即使项目存在也推送到数组并且它永远不会 console.log 'exists`

如何更改我的 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>
    )

  }
}

【问题讨论】：

如果您不需要特别使用数组，您可以使用对象属性创建哈希图，以确保唯一性
谢谢，我会研究使用哈希图的可能性
我不是想回答这个问题，只是建议一个替代方案来帮助你，如果你最终使用这种方法，你应该用你所做的事情来回答你自己的问题:)跨度>

标签： javascript arrays reactjs

【解决方案1】：

应该是：

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

因为val 这里是一个对象而不是字符串。

看看这个： https://www.webpackbin.com/bins/-Kpo0Rk6Z8ysenWttr7q

【讨论】：

澄清一下：{console.log(this.handleCheck('item2'))} 正在传递一个字符串，但 <button onClick={() => this.handlePush({name: 'item2'})}>push</button> 正在传递一个对象。
感谢这项工作并感谢您澄清@DaveSalomon 我可以看到我哪里出错了

【解决方案2】：

在搜索 Check value exists in an array in React 时，我进入了这个页面，并想为其他认为有任何特殊情况的人提供一个解决方案（除了这个问题）使用 React 检查数组中的值。

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

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

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

谢谢。

【讨论】：

天才……绝对是天才。最好的简单。我尝试了各种方法，但这个简单的单线......老兄，谢谢！
我尝试在我的 react 应用程序中使用它来验证表单输入。这在所有情况下都很好用，除了当我输入然后从我的输入字段中删除“bob”时，空字段的验证不会失败。在数组实例上使用 includes() 为我解决了这个问题。

【解决方案3】：

对数组实例使用includes() 方法。

console.log(['red', 'green'].includes('red'))
console.log(['red', 'green'].includes('blue'))

【讨论】：