ne peut pas lire setstate de undefined

Question

Y at-il une meilleure façon de faire ce qui suit. considérer ce code:

this.state = { 
     dates: [ 
     {date: '1st', matches:[]}, 
     {date: '2nd', matches:[]}, 
     {date: '3rd', matches:[]}, 
     {date: '4th', matches:[]}, 
     {date: '5th', matches:[]} 
     ] 
    } 

    addToDates =() => { 
    let dates = this.state.dates; 
    const matches = this.props.matches; 
    matches.forEach(function(match){ 
     dates.forEach(function(date){ 
     if (match.date == date.date){ 
      this.setState({dates: this.state.dates.concat(match)}) 
     } 
     }) 
    }) 
    } 

ce que je suis en train de faire itérer 2 tableaux et si je trouve un match qui a la même date comme une date alors je veux l'ajouter au tableau de correspondances.

2 problèmes, premièrement, y a-t-il une meilleure façon de comparer deux réseaux plutôt que d'itérer les deux réseaux? d'autre part, je ne peux pas obtenir lu setState undefined même si j'ai:

this.addToDates = this.addToDates.bind(this) bound it in my constructor. i thought arrow functions solved that scoping too? 

Answer 1

Vous devez utiliser des fonctions de direction dans votre méthode addToDate. Vous n'avez pas réellement à lier addToDates dans votre constructeur lorsque vous utilisez une fonction de flèche en tant que propriété de classe.

La valeur de this lorsque vous utilisez this.setState est différente si vous n'utilisez pas de fonctions de flèche pour vos boucles forEach.

addToDates =() => { 
    let dates = this.state.dates; 
    const matches = this.props.matches; 
    matches.forEach(match =>{ 
    dates.forEach(date =>{ 
     if (match.date == date.date){ 
     this.setState({dates: this.state.dates.concat(match)}) 
     } 
    }); 
}); 

Comme par MDN

Jusqu'à fonctions de direction, chaque nouvelle fonction définie par son propre cette valeur (un nouvel objet dans le cas d'un constructeur, non défini en mode strict appels de fonction, la base objet si la fonction est appelée "méthode objet", etc.). Cela s'est avéré ennuyeux avec un style de programmation orienté objet . Une fonction de flèche ne crée pas la sienne, la valeur de ce paramètre est utilisée.