Question

我正在从spring控制器获取redux存储中数组中的映射。我想通过该数组进行映射。但它给了我错误TypeError: project_tasks.map is not a function。我可以看到状态内部的映射，但是无法通过该数组进行映射。我该怎么办，请帮助我，我是新来的。

这是我的商店

mobile.js

let mobile = [];

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

mobile.push(mobiletasks);

mobileItems.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;

请告诉我我在做什么错了？

Answer 1

尝试

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

Answer 2

不要再打开（箭头功能后的括号就是这样

const mobiletasks = project_tasks.map（（project_task，index）=>

 <mobileItems key={project_task.viewproducts3.id}

project_task = {project_task} />）;

Answer 3

查看您的redux状态：project_task具有以下结构：

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

map中包含了Array.prototype方法（请参见map doc），因此您必须将其与arrays而非objects一起使用（{ {1}}是一个对象）。

Answer 4

基本上，您试图映射对象，这是错误的，

理论解决方案

project_tasks内部有4个对象，如果您尝试映射viewproducts1-2-3中的数据，则需要将其推入这样的变量

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

这将从viewproducts1-3到task的所有数据加载

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

您可以愉快地映射值：）

希望获得帮助

Answer 5

尝试一下。

let mobile = [];

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

mobile.push(mobiletasks);

如何在反应中映射地图数组？

5 个答案: