我正在尝试检查数组中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>
)
}
}
它应该是:
handleCheck(val) {
return this.state.data.some(item => val.name === item.name);
}
因为val
这是一个对象而不是字符串。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句