Как отобразить массив карты в React?
Я получаю карту внутри массива в хранилище redux из контроллера Spring. И я хочу отобразить этот массив. но это дает мне ошибку 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">₹</h5>
</div>
</div>
</div>
</a>
</div>
</div>
);
}
}
export default mobileItems;
Скажите, пожалуйста, что я здесь делаю не так?
Проверьте, является ли project_tasks массивом. Если это не массив, то функцию map нельзя применить к этому свойству (например, project_tasks).
@Shubham Khatri, я пытался, как ты сказал, но. он показывает мне вывод 5 раз на консоли.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Не открывайте другой (скобка после стрелочной функции просто так
const mobiletasks = project_tasks.map((project_task, index) =>
<mobileItems key = {project_task.viewproducts3.id}
project_task = {project_task} /> );
Посмотрите на свое состояние редукции: project_task имеет такую структуру:
project_task: {
project_tasks: {
viewproducts3: [],
viewproducts1: [],
viewproducts2: [],
categories: [],
project_task: {}
}
}
Метод map включен в Array.prototype (см. документ карты), поэтому вы должны использовать его с arrays вместо objects (project_tasks - это объект).
В основном вы пытаясь отобразить объект, что неправильно,
ТЕОРЕТИЧЕСКОЕ РЕШЕНИЕ
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} />
));
и вы можете с радостью сопоставить значения :)
Надеюсь на эту помощь
это не работает. Я получаю сообщение об ошибке «TypeError: недопустимая попытка распространения не повторяемого экземпляра».
Попробуй это.
let mobile = [];
const mobiletasks = Object.values(project_tasks).map((project_task, index) => (
<mobileItems key = {index} project_task = {project_task} />
));
mobile.push(mobiletasks);
попробуй это
{Object.keys(project_tasks).map((item, index) => {
if (item == "viewproducts3"){
return (project_tasks.viewproducts2.map((c) => {
return (
<h1>{c.id}</h1>
)
}))
}
})}
Возможный дубликат React - как отобразить значения вложенных объектов?