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

Question

Dans mon application React Native, j'ai une situation dans laquelle un enfant particulier d'un composant que je render doit recevoir une réponse verte ou rouge borderColor .

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

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

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'assignation Cette erreur est une optimisation des performances et n'est pas Cette erreur est une optimisation des performances et n'est pas conforme aux spécifications.

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

Answer 1

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

Je veux seulement ajouter une solution à mon problème initial, qui était de dériver deux objets de style différents à partir d'un seul objet de base où une seule propriété est ajoutée.

En documents pour les StyleSheet API indique que la méthode flatten peut être utilisé à cet effet :

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

Answer 2

Il semble que la fonction factory ne renvoie pas un objet JavaScript avec la propriété dont vous avez besoin, et que l'environnement ne veuille pas appliquer l'opérateur spread à une valeur indéfinie. Si vous voulez l'utiliser, retirez l'objet que vous passez à cette fonction dans une autre variable.