Comment obtenir la valeur d'un objet dans React

Question

J'ai une liste d'objets de données comme suit

données:

[
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  }
]

Je veux obtenir la valeur du nom des données.

code:

return(

            {Object.keys(cardData).map((keys)=>{
                {cardData[keys].name}

            })}

    ) 

mais je n'obtiens aucune donnée en retour. Lorsque j'utilise map pour itérer. Une erreur me montre cardData.map n'est pas une fonction. S'il vous plaît aidez-moi à résoudre le problème

Answer 1

Couple de problèmes :

1. Vous devez ajouter explicitement une instruction return dans la fonction de rappel de la méthode map()

   return {cardData[keys].name}

2. cardData semble être un tableau. Si c'est le cas, alors pas besoin d'utiliser Object.keys(...). Appelez la méthode map() directement sur le tableau

   {cardData.map((obj) => {
      return {obj.name}      
   })}

   L'option alternative est de supprimer les accolades. Cela vous permettra de supprimer le mot-clé return et le li sera retourné implicitement

   {cardData.map((obj) => {obj.name})}

---

Note : N'oubliez pas d'ajouter la propriété key sur l'élément li :

{cardData.map((obj) => (
   {obj.name}
))}

---

Modifier

Si cardData n'est pas un tableau, mais est simplement un objet de la forme suivante :

{
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    ...
}

utilisez alors le code suivant :

{Object.keys(cardData).map(key => {
    return {cardData[key].name}      
})}

OU utilisez le retour implicite en supprimant les accolades :

{Object.keys(cardData).map(key => ( 
    {cardData[key].name}      
))}

Answer 2

Vous devez explicitement return des valeurs de map.

Étant donné que cardData est déjà un tableau, vous pouvez utiliser directement map sur les tableaux, pas besoin de prendre les clés et ensuite les traiter pour obtenir le name.

CODESANDBOX

<>

    {cardData.map((o) => {
      return {o.name};
    })}

Answer 3

Fonctionne comme un charme !

export default function App() {
  var cardData = [
    {
      "postId": 1,
      "id": 1,
      "name": "id labore ex et quam laborum",
      "email": "Eliseo@gardner.biz",
      "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
    },
    {
      "postId": 1,
      "id": 2,
      "name": "quo vero reiciendis velit similique earum",
      "email": "Jayne_Kuhic@sydney.com",
      "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
    }
  ];
  return (

        {Object.keys(cardData).map((keys)=> {return {cardData[keys].name}})}

  );
}

Answer 4

Vous avez oublié l'instruction de retour. Dans la documentation (https://reactjs.org/docs/lists-and-keys.html), vous pouvez voir qu'ils le font ainsi (Ils n'utilisent pas d'instruction de retour à l'intérieur des "{}", ils utilisent simplement "()":

  return (
    <>
      {Object.keys(cardData).map((keys, index) => ( //Regardez ici, ils n'utilisent pas de "{", donc pas besoin d'une instruction "return()" à l'intérieur
        {cardData[keys].name}
      ))}

  )
}