web-dev-qa-db-fra.com

Erreur lors de la création d'un nouvel objet à partir d'un objet existant en utilisant `...`: dans cet environnement, les sources pour assign DOIVENT être un objet

Dans mon React application native, j'ai une situation où un enfant particulier d'un composant que je render devrait recevoir soit un vert ou un rouge borderColor.

Maintenant, je ne veux pas créer deux entrées distinctes dans mon styles pour ces deux situations car elles ne diffèrent que par la propriété borderColor.

Mon idée était de dériver l'objet de style approprié de ceux que j'ai dans mon styles comme ceci:

const styles = StyleSheet.create({
  amountSection: {
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row',
    borderRadius: 3
  }
})

render() {
  const amountBorderColor = this.state.isClaim ? 'green' : 'red'
  const amountStyles = {
    ...styles.amountSection,
    borderColor: amountBorderColor
  }

  return (
    // ... apply amountStyles at appropriate component
  )
}

Cependant, ce code donne l'erreur suivante:

Exception JS non gérée: dans cet environnement, les sources d'affectation DOIVENT être un objet. Cette erreur est une optimisation des performances et non conforme aux spécifications.

Apparemment, l'erreur est frappée sur la ligne où je définis amountStyles. Quelqu'un sait pourquoi cela se produit? Y a-t-il un problème avec ma syntaxe? J'utilise le ... notation pour créer un nouvel objet à partir d'un objet existant et lui ajouter des propriétés supplémentaires.

javascriptreactjsreact-native
34
nburk

Comme l'a souligné @PitaJ, mon problème était que StyleSheet.create ne renvoie pas un simple objet javascript, donc le ... L'opérateur ne peut pas être appliqué.

Je souhaite également ajouter une solution à mon problème d'origine, à savoir dériver deux objets de style différents à partir d'un seul élément de base dans lequel une seule propriété est ajoutée.

docs pour l'API StyleSheet indique que la méthode flatten peut être utilisée pour cela:

const amountBorderColor = this.state.isClaim ? 'green' : 'red'
const amountStyles = StyleSheet.flatten([styles.amountSection, {borderColor: amountBorderColor}])
73
nburk

Il semble que la fonction d'usine ne renvoie pas un objet JavaScript avec la propriété dont vous avez besoin et que l'environnement ne souhaite pas appliquer l'opérateur de propagation à une valeur non définie. Si vous souhaitez l'utiliser, retirez l'objet que vous passez à cette fonction dans une variable différente.

6
PitaJ