Javascript 检查数组 React 中是否存在项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45277306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if item exists in array React
提问by tom harrison
I'm trying to check if an item exists in my array dataand if it does then prevent it from being added to the array.
我试图检查我的数组中data是否存在一个项目，如果它存在，则阻止它被添加到数组中。
The handleCheckfunction will return true if an items already exists in the array but I'm not sure how to then use this to prevent the item from being added to the array.
handleCheck如果数组中已存在项目，则该函数将返回 true，但我不确定如何使用它来防止将项目添加到数组中。
I have attempted to use it in the handlePushfunction this.handleCheck(item) == false ?it should check if it's false and if so then push, if it returns true it should say it exists but at the moment this is not working as it will push to the array even if the item exists and it will never console.log 'exists`
我试图在handlePush函数中 使用它，this.handleCheck(item) == false ?它应该检查它是否为假，如果是，则推送，如果它返回真，它应该说它存在，但目前这不起作用，因为即使项目存在它也会推送到数组它永远不会 console.log 'exists`
How can I change my handlePush function to use handleCheck and prevent an item that already exists in the array to be added again?
如何更改我的 handlePush 函数以使用 handleCheck 并防止再次添加数组中已存在的项目？
https://www.webpackbin.com/bins/-KpnhkEKCpjXU0XlNlVm
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>
)
}
}
回答by BnoL
it should be:
它应该是：
handleCheck(val) {
return this.state.data.some(item => val.name === item.name);
}
because valhere is an Object not a String.
因为val这里是一个对象而不是一个字符串。
Check this out: https://www.webpackbin.com/bins/-Kpo0Rk6Z8ysenWttr7q
回答by Balasubramani M
While searching for Check value exists in an array in React, I was landed in this page and would like to give a solution (apart from this question) for others who think there is any special case to check for a value in an array using React.
在 React 中搜索数组中存在的 Check value 时，我进入了这个页面，并想为其他认为有任何特殊情况可以使用 React 检查数组中的值的人提供一个解决方案（除了这个问题） .
You can rightly use the default JavaScript method too. There is nothing special when it comes to React.
您也可以正确地使用默认的 JavaScript 方法。React 没有什么特别之处。
var arr = ["steve", "bob", "john"];
console.log(arr.indexOf("bob") > -1); //true
Thank you.
谢谢你。
