web-dev-qa-db-ja.com

アイテムが配列に存在するかどうかを確認しますReact

配列dataにアイテムが存在するかどうかを確認しようとしていますが、存在する場合は配列に追加できません。

アイテムが配列に既に存在する場合、handleCheck関数はtrueを返しますが、これを使用してアイテムが配列に追加されないようにする方法はわかりません。

私はhandlePush function this.handleCheck(item) == false ?でそれを使用しようとしました。それがfalseであるかどうかをチェックし、そうであればPush、trueを返す場合は存在すると言うべきですが、現時点ではそうではありませんアイテムが存在し、console.log 'exists`が存在しない場合でも配列にプッシュするように動作します

HandleCheckを使用するようにhandlePush関数を変更し、配列に既に存在するアイテムが再度追加されるのを防ぐにはどうすればよいですか？

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>
    )

  }
}
javascriptarraysreactjs
5
tom harrison

そのはず：

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

これはvalが文字列ではなくオブジェクトであるためです。

これをチェックしてください： https://www.webpackbin.com/bins/-Kpo0Rk6Z8ysenWttr7q

15
BnoL

Reactの配列に値が存在することを確認するを検索しているときに、このページに移動し、確認する特別なケースがあると考える他の人に（この質問とは別に）解決策を提供したいと思いますReactを使用した配列の値。

デフォルトのJavaScriptメソッドも正しく使用できます。 Reactに関しては特別なことは何もありません。

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

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

ありがとうございました。

4
Balasubramani M