web-dev-qa-db-fra.com

Le côté droit de 'instanceof' n'est pas appelable

Je suis ce tutoriel pour "détecter" si un numéro unique se trouve dans un objet tableau. Ce nombre est une chaîne.

Je suis habitué à detect dans Ruby on Rails alors je cherche l'équivalent dans React (JavaScript):

ES6:

...


// this will be "data" in "this.props.data"
data = [
 {
   id: 1,
   order_id: "44",
   name: "Some order number name",
  },
  {
    id: 2,
    order_id: "65",
    ...,
  }
]

  // let num = "44"; Just for this example

  renderCreditNote(num){
    if (num instanceof this.props.data) {
      return num.map(function(p){
        return p.order_id
      });
    }
  }

  render(){
   return({this.renderCreditNote().bind(this)})
  }

...

En réalité, cela ressemblera à ceci: this.renderCreditNote(this.state.num).bind(this)

Donc, si cette num est dans le tableau, affichez uniquement ce tableau. Est-ce que je le fais de la bonne façon? L'erreur est:

Uncaught TypeError: le côté droit de 'instanceof' n'est pas appelable

javascriptarraysreactjs
8
Sylar

Je ne connais pas Ruby, mais d'après la description de detect, il semble que vous recherchiez array.find en JavaScript. .find itère sur un tableau - s'il trouve l'élément que vous recherchez, il le retourne et arrête d'itérer, s'il ne trouve rien, undefined est renvoyé.

Donc par exemple:

  renderCreditNote(num){
    return this.props.data.find(function(p){
      return num === p.order_id;
    });
  }

Voici un violon: https://jsfiddle.net/7ykt9ze3/

Quelques prothèses ES6:

  renderCreditNote(num){
    return this.props.data.find(p => num === p.order_id);
  }

Sachez que ceci n'est pas complètement supporté par les navigateurs un peu plus anciens, je sais par expérience que IE11 ne l'a pas. Cependant, cela vaut vraiment le polyfill.

À propos du blog que vous avez lié - sans entrer dans un héritage prototype, instanceof renvoie fondamentalement vrai/faux si l'entrée est de la structure de données. Dans le blog que vous avez lié, ils détectent si l'entrée est un objet ou un tableau, mais uniquement pour pouvoir effectuer des actions différentes en fonction de cette entrée. Ainsi, s’il s’agit d’un objet, ils renvoient simplement le champ sur cet objet. Si c’est un tableau, ils parcourent le tableau avec .map et renvoient tous les noms de ces objets dans ce tableau.

Modifier pour vérifier la méthode de rendu:

  render(){

   return(<div>{JSON.stringify(this.renderCreditNote().bind(this))}</div>)
  }
1
erik-sn

Vous êtes censé passer une fonction à instance de dans le côté droit. Essayez et faites this.props.data.constructor

0
Kafo