Après la mise à niveau vers React 16.8 et React Native 0.59.8, l'utilisation de l'opérateur spread dans une fonction de carte jsx ne fonctionne plus.
Ancien code qui ne fonctionne plus:
this.state.orders.map(function (order, idx) {
let norder = {
...order,
showModalOrderDetails: this.showModalOrderDetails,
getOrders: this.getOrders
}
return <Row key={idx} {...norder} />
}.bind(this))
La ligne ne reçoit plus l'objet 'commande'.
Nouveau code de travail:
this.state.orders.map(function (order, idx) {
return <Row key={idx} order={order} showModalOrderDetails={this.showModalOrderDetails} getOrders={this.getOrders} />
}.bind(this))
La ligne reçoit 'commande'.
Est-ce que je manque quelque chose de fondamental (probablement parce que j'y suis depuis des heures) ou y a-t-il un changement?
Mise à jour:
this.state.orders.map(function (order, idx) {
return <Row key={idx} {...order} showModalOrderDetails={this.showModalOrderDetails} getOrders={this.getOrders} />
}.bind(this))
Résultats :
05-14 16: 04: 24.365 29691 29971 I ReactNativeJS: 'Accessoires reçus dans l'enfant:' , {showModalOrderDetails: [Function: bound proxiedMethod],
05-14 16: 04: 24.365 29691 29971 I ReactNativeJS: getOrders: [Function: bound proxiedMethod]}
05-14 16: 04: 24.467 29691 29971 E ReactNativeJS: TypeError: undefined n'est pas un objet (évaluation de 'this.props.customer.firstname')
Alors que:
this.orders.map(function (order, idx) {
return <Row key={idx} order={order} />
});
Résultats: p >
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: 'Accessoires reçus dans l'enfant:' , {order: p>
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: {id: 2132,
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: customerOrderId: 123, p >
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: franchiseId: 41,
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: client:
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: {prénom: 'erich',
... 05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: showModalOrderDetails: [Function: bound proxiedMethod],
05-14 16: 08: 42.033 29691 29971 I ReactNativeJS: getOrders: [Function: bound proxiedMethod] }
MISE À JOUR
Le problème est résolu si je fais ce qui suit:
this.orders.map(function (order, idx) {
return <Row key={idx} {...order} />
});
Quelqu'un peut-il expliquer cette? Je n'ai jamais eu à faire ça auparavant.
3 Réponses :
Actuellement, vous répartissez les éléments à l'intérieur de l'objet. Par exemple, si order ressemble à {id: 1, name: 'jon'} , le composant aura id et name comme accessoires, mais pas l'ensemble de l'objet de commande. Si vous faites ce qui suit, vous recevrez le prop de commande dans le composant de ligne. C'est la même chose que de dire order = {order} et fonctionnera pour n'importe quel type de données. C'est aussi la même chose que de dire {... {order: order}} - juste un raccourci es6.
essayez ceci:
this.orders.map((order, idx) => <Row key={idx} { ...{ order }} />)
vous peut également simplifier avec ES6
this.orders.map(function (order, idx) {
return <Row key={idx} { ...{ order }} />
});
Veuillez ajouter quelques explications à votre code - que faut-il essayer et pourquoi? Gardez à l'esprit que les autres devraient pouvoir apprendre de votre réponse
Ajout de plus de clarté. C'est la bonne réponse @nico, donc je ne sais pas pourquoi elle a été rejetée
@johnsourcer à en juger par la sortie de débogage, vous demandez peut-être this.props.customer.firstName à l'intérieur de
@ jsw324 l'objet 'order' est affiché dans le deuxième débogage donc dans le premier lors du passage de la {... order}, this.props.customer est correct. Très étrange.
Je ne sais pas où / comment vous obtenez les données, mais peut-être que l'accessoire est indéfini lorsque le composant se monte d'abord, puis se rend à nouveau lorsqu'il reçoit les données. Essayez simplement de mettre un check in nul pour que le composant ne soit pas rendu si le prop est nul. Je ne sais pas si vous avez essayé ce qui précède, mais cela fonctionnera et est plus propre à mon humble avis - vous pouvez déstructurer dans le composant consommateur en supposant qu'il soit fonctionnel const Row = ({customer, etc}) => (
@NicoHaase j'ai corrigé en fonction de votre commentaire. Si c'était la raison du vote défavorable, que diriez-vous d'un vote favorable;)
J'ai mis à jour la question avec une solution de travail, mais je ne sais pas pourquoi.
@ jsw324 la raison du vote défavorable , Habituellement, les votants négatifs ne traînent pas et expliquent. Je pense qu'il est généralement préférable de donner une raison à l'affiche, pour qu'elle ait une chance de réparer. Voter à la baisse puis s'enfuir n'aide pas vraiment SO du tout. Personnellement, je ne m'en soucie pas, ça leur coûte de toute façon Rep.
La propagation en tant qu'attribut dans ce cas est généralement effectuée pour passer un ensemble de clés d'objet en tant qu'accessoires, plutôt qu'un objet lui-même. Par exemple, considérez cet objet:
const order = {
order: 'something'
}
<MyComp {...order}/> // this will pass a prop called order down
Si vous diffusez ceci: , c'est la même chose que de faire:
Cela dit, si l'objet que vous étendez contient une clé ordre code> (donc order.order est valide), puis la diffusion mettra un accessoire de commande sur le composant. Par exemple:
const obj = {
propA: 5,
propB: 'hi'
}
Donc, si votre code d'origine a fonctionné à un moment donné, je suppose que vous aviez une clé order sur votre objet. Vous pouvez en savoir plus ici: https://reactjs.org/ docs / jsx-in-depth.html # spread-attributes
Ouais, soyez gentil si les gens disaient pourquoi .. :( Mais actuellement, il ne répond pas vraiment pourquoi -> Après la mise à jour: ne fonctionne plus . La mise à niveau de React ne devrait avoir aucun effet sur le fonctionnement de l'opérateur de diffusion, les anciennes versions de React serait le même, .. J'ai le sentiment que l'OP voit autre chose, et il s'est avéré que c'était juste un problème après la mise à niveau, potentiellement beaucoup d'autres choses ...
@Keith Eh bien, je crois que cela répond pourquoi. Les versions n'affecteraient pas la syntaxe, donc la seule réponse logique est que quelque chose d'autre a changé, probablement que les données elles-mêmes (et que les données précédentes ne fonctionnaient que parce qu'elles avaient une clé de commande).
Oui, votre modification est intervenue après la lecture de votre message. d'ailleurs. N'est-ce pas moi qui ai voté à la baisse, donnant simplement une raison pour laquelle quelqu'un aurait pu. Je vais quand même voter pour, car je suppose que votre modification en est la raison .. IOW: ce qui a été passé à l'ordre, n'est pas ce qui a été adopté avant ..
Merci pour les réponses. Je suis d'accord que {... order} sera this.props dans le composant enfant. Ce n'est tout simplement pas là. Évidemment, quelque chose d'autre doit être faux mais c'est étrange parce que si je le change en order = {order}, il est disponible sous le nom this.props.order, ce qui est correct.
Ce n'est pas un problème React, lorsque vous utilisez l'opérateur de diffusion {... order} , le composant Row recevra les propriétés à l'intérieur de order code >, par exemple si order = {a: 1, b: 2, c: 3} alors Row reçoit a , b et c et non order mais vous pouvez utiliser La syntaxe d'affectation de déstructuration pour obtenir les propriétés à l'intérieur d'une variable order comme celle-ci: // Row.js
...
const { a, b, c } = props;
console.log(a, b, c); // 1 2 3
// Or
const { ...order } = props;
console.log(order); // { a: 1, b: 2, c: 3 }
La syntaxe des paramètres rest n'a rien à voir avec cela.
J'ai mis à jour ma question avec la sortie de débogage. Ça doit être quelque chose de stupide de mon côté? Shirley?
Quel est le type de données de la
commande? S'il s'agit d'un objet, alors{... order}devrait convenir, s'il s'agit d'une valeur simple (par exemple un nombre ou une chaîne), vous devez utiliserorder = {order} . En d'autres termes, cela dépend de comment vous voulez passer lacommandeàRow.L'opérateur de diffusion ne devrait avoir aucun effet sur la version de React que vous exécutez. L'opérateur de diffusion est Javascript, pas React.
c'est parce que vous étalez les éléments dans l'objet. par exemple si c'est la commande: {name: 1} vous mettez
namecomme accessoire - pasorder. Ma réponse ci-dessous est correcte, je ne sais pas pourquoi elle a été rejetée.Mis à jour avec une solution de travail. Vous ne savez pas pourquoi?
Ouais, pourquoi devons-nous faire ça? Cela fonctionne mais ... c'est absurde de devoir le changer pour toute l'application: /