1
votes

Comment cartographier un tableau de carte dans React?

Je reçois une carte dans un tableau dans le magasin redux à partir du contrôleur de printemps. Et je veux mapper à travers ce tableau. mais cela me donne une erreur TypeError: project_tasks.map n'est pas une fonction . Je peux voir la carte à l'intérieur de l'état mais je ne peux pas mapper à travers ce tableau. Comment puis-je faire cela, s'il vous plaît, aidez-moi Je suis nouveau à réagir.

Ceci est ma boutique

mobile.js

import React, { Component } from 'react'

class mobileItems extends Component {
render() {
const { project_task } = this.props;
return (
   <div class="row mx-auto" style="background-color: white;">
       <div class="col-lg-2 col-md-6 mb-4">
          <a href="" style="text-decoration: none;" id="">
              <div class="card h-100">
                  <img src="" alt="" class="card-img-top zoom mt-2"/>
                  <div class="card-body text-center">
                      <h5 class="titlename text-truncate">project_task.name</h5>
                      <div class="caption">
                          <h5 class="pull-right productprice">&#8377;</h5>
                       </div>
                  </div>
              </div>
          </a>
      </div>
     </div>
);
}
}

export default mobileItems;

let mobile = [];

const mobiletasks = project_tasks.map((project_task, index) => (
<mobileItems key={project_task.viewproducts3.id} project_task={project_task} />
));  

mobile.push(mobiletasks);

S'il vous plaît dites-moi ce que je suis vous vous trompez ici?

javascript reactjs html

3 commentaires

Duplicata possible de React - comment mapper les valeurs d'objets imbriqués?

Vérifiez si project_tasks est un tableau. S'il ne s'agit pas d'un tableau, la fonction map ne peut pas être appliquée à cette propriété (c'est-à-dire project_tasks).

@Shubham Khatri j'ai essayé comme vous l'avez dit, mais. il me montre une sortie 5 fois sur console.

5 Réponses :

1
votes

N'en ouvrez pas un autre (la fonction crochet après flèche ressemble à ceci

const mobiletasks = project_tasks.map ((project_task, index) =>

 <mobileItems key={project_task.viewproducts3.id}

project_task = {project_task} />);

0 commentaires

0
votes

Regardez votre état redux: project_task a cette structure:

project_task: {
    project_tasks: {
        viewproducts3: [],
        viewproducts1: [],
        viewproducts2: [],
        categories: [],
        project_task: {}
    }
}

La méthode map est incluse dans le Array .prototype (voir map doc ), vous devez donc l'utiliser avec des tableaux plutôt qu'avec des objets ( project_tasks est un objet).

0 commentaires

0
votes

En gros, vous essayez de mapper un objet ce qui est faux,

SOLUTION THEORIQUE strong >

project_tasks contient 4 objets et si vous essayez de mapper les données de viewproducts1-2-3 , vous devez les pousser vers un variable comme celle-ci

const mobiletasks = tasks.map((project_task, index) => (
<mobileItems key={project_task.id} project_task={project_task} />
));

cela chargera toutes les données de viewproducts1-3 vers task

let tasks = []
tasks.push(...project_tasks.viewproducts1)
tasks.push(...project_tasks.viewproducts2)
tasks.push(...project_tasks.viewproducts3)

et vous pouvez facilement mapper les valeurs :)

J'espère que cette aide

1 commentaires

cela ne fonctionne pas. J'obtiens l'erreur "TypeError: Tentative non valide de propagation d'une instance non itérable".

1
votes

Essayez ceci.

let mobile = [];

const mobiletasks = Object.values(project_tasks).map((project_task, index) => (
<mobileItems key={index} project_task={project_task} />
));  

mobile.push(mobiletasks);

0 commentaires

1
votes

essayez ceci

{Object.keys(project_tasks).map((item, index) => {
if(item == "viewproducts3"){
return (project_tasks.viewproducts2.map((c) =>  {
return (
   <h1>{c.id}</h1>
  ) 
})) 
}
})}

0 commentaires