Si je retourne un seul élément et que je pose le code JS dans {} , pourquoi ne fonctionnera-t-il pas?
4 Réponses :
Le composant n'est pas bien formaté. Vous essayez d'attribuer à l'intérieur de l'instruction de retour dans le composant JSX, c'est pourquoi il ne fonctionne pas.
La mission ci-dessous est ce qui cause le problème. P>
import React from "react";
import Card from "./Card";
const CardList = ({ robots }) => {
return (
<div>
{robots.map((user, i) => {
return (
<Card
key={robots[i].id}
id={robots[i].id}
name={robots[i].name}
email={robots[i].email}
/>
);
})}
</div>
);
};
export default CardList;
Vous ne pouvez pas définir de variables dans l'énoncé de retour de réact de composant apatride / fonctionnel.
Essayez ceci: P>
import React from "react";
import Card from "./Card";
const CardList = ({ robots }) => {
return (
<div>
{robots.map((user, i) => {
return (
<Card
id={robots[i].id}
name={robots[i].name}
email={robots[i].email}
/>
);
})}
</div>
);
};
export default CardList;
supposer que les robots code> sont un tableau si utilisateurs code> et chaque utilisateur code> est un objet, cela devrait alors fonctionner. const CardList = ({ robots }) => (
<div>
{robots.map((user, i) => (
<Card
id={user.id}
name={user.name}
email={user.email}
key={i}
/>
))}
</div>
);
export default CardList;
Le problème est que vous définissez la variable CardComponent dans le rendu.
Vous avez seulement besoin
Aussi, vous n'avez pas besoin d'accéder au contenu de chaque entrée de réseau de robots en utilisant Voir la codesandbox ci-jointe pour une version de travail:
https://codesandbox.io/s/robots- z5b6h? File = / src / cardlist.js robots.map ((utilisateur, i) => ...)
robots [i] , car ils sont attribués automatiquement au premier argument de votre carte de carte (dans ce cas utilisateur ).
Pourriez-vous nous montrer le message d'erreur
Vous ne pouvez mettre que des expressions à l'intérieur des accolades Courly JSX. Une déclaration de variable ou une affectation est une déclaration et non une expression. Si vous ne savez pas ce que signifie «déclaration» et «expression», je vous suggère de le rechercher, car il est fondamental pour une grande partie de la programmation.