Не могу найти ошибгу в алгоритме

Рейтинг: 0Ответов: 1Опубликовано: 09.05.2023
data.map((arr, id) =>{
      if(id === 0){return(<div></div>)}
      console.log(arr)
      return(arr.map((product, id) => {
        console.log(product)
        return(<div>name: {product.name}price: {product.price}</div>)
      }))
    })

data:

[
  {
    "errors": false,
    "error": {
      
    }
  },
  [
    {
      "name": "Процессор Intel Core i5-12400F (C6/12T, 18M Cache,2.5 up to 4.4GHz) LGA1700 OEM",
      "price": "73 890 ₸"
    },
    {
      "name": "Процессор Intel Core i5-12400 (C6/12T, 18M Cache,2.5 up to 4.4GHz) LGA1700 OEM",
      "price": "79 190 ₸"
    },
    {
      "name": "Процессор Intel Core i5-12500 (C6/12T, 18M Cache,3.0 up to 4.6GHz) LGA1700 OEM",
      "price": "94 490 ₸"
    },
    {
      "name": "Процессор Intel Core i5-13600KF (C14/20T, 24M Cache, 2.6 up to 5.1GHz) LGA1700 OEM",
      "price": "142 690 ₸"
    },
    {
      "name": "Ноутбук NEO 15U i5 5257U / 8ГБ / 256SSD / 15.6 / Win10 / (WH15U-I5)",
      "price": "169 990 ₸"
    },
    {
      "name": "Ноутбук Lenovo IdeaPad 3 i5 1235U / 8ГБ / 512SSD / 15.6 / Win11 / (82RK00F0RK)",
      "price": "319 990 ₸"
    },
    {
      "name": "Ноутбук Lenovo IdeaPad 3 i5 1235U / 16ГБ / 512SSD / 15.6 / DOS / (82RK00L4RK)",
      "price": "319 990 ₸"
    },
    {
      "name": "Ноутбук Lenovo IdeaPad 3 i5 1235U / 8ГБ / 512SSD / 15.6 / DOS / (82RK00EVRK)",
      "price": "279 990 ₸"
    },
    {
      "name": "Ноутбук HP 15s-fq5033ci i5 1235U / 8ГБ / 512SSD / 15.6 / DOS / (725V9EA)",
      "price": "279 890 ₸"
    },
    {
      "name": "Ноутбук HUAWEI MateBook D14 i5 1135G7 / 8ГБ / 512SSD /14 / Win11 / (NobelD-WDH9D)",
      "price": "299 990 ₸"
    },
    {
      "name": "Ультрабук Lenovo IdeaPad 5 Pro i5 12500H / 16ГБ / 512SSD / 16 / Win11 / (82SK009QRK)",
      "price": "399 990 ₸"
    },
    {
      "name": "Ноутбук Asus X515JA i5 1035G1 / 8ГБ / 512SSD / 15.6 / DOS / (X515JA-BQ3021)",
      "price": "259 990 ₸"
    },
    {
      "name": "Ноутбук Asus X515EA i5 1135G7 / 8ГБ / 512SSD / 15.6 / DOS / (X515EA-BQ1206)",
      "price": "249 990 ₸"
    },
    {
      "name": "Ноутбук HUAWEI MateBook D15 i5 1135G7 / 8ГБ / 256SSD / 15.6 / Win11 / (BohrD-WDH9C)",
      "price": "299 990 ₸"
    },
    {
      "name": "Ноутбук HUAWEI MateBook D16 i5 12500H / 16ГБ / 512SSD / 16.1 / Win11 / (RolleF-W5651)",
      "price": "499 990 ₸"
    },
    {
      "name": "Ультрабук Lenovo IdeaPad 5 Pro i5 1135G7 / 8ГБ / 512SSD / 14 / Win11 / (82L300MSRK)",
      "price": "389 990 ₸"
    },
    {
      "name": "Ноутбук HP Pavilion 15s-fq5039ci i5 1215U / 8ГБ / 256SSD / 15.6 / Win11 / (799A6EA)",
      "price": "279 890 ₸"
    },
    {
      "name": "Ноутбук Asus Vivobook i5 12500H / 16ГБ / 512SSD / 15.6 / Win11 / (X1603ZA-MB021W)",
      "price": "449 990 ₸"
    },
    {
      "name": "Ноутбук HP 15s-fq5032ci i5 1235U / 8ГБ / 512SSD / 15.6 / DOS / (725W7EA)",
      "price": "279 890 ₸"
    },
    {
      "name": "Ноутбук Lenovo IdeaPad L3 i5 1135G7 / 8ГБ / 1000HDD / 15.6 / Win10 / (82HL002HRK)",
      "price": "219 990 ₸"
    },
    {
      "name": "Ноутбук Asus Vivobook X OLED i5 12500H / 16ГБ / 512SSD / 15 / DOS / (X1503ZA-L1232)",
      "price": "359 990 ₸"
    },
    {
      "name": "Ультрабук Asus Zenbook 14 OLED i5 1240P / 16ГБ / 512SSD / 14 / Win11 / (UX3402ZA-KM319W)",
      "price": "499 990 ₸"
    },
    {
      "name": "Ноутбук HP ENVY 13-BA1023UR i5 1135G7 / 8ГБ / 256SSD / 13.3 / Win11 / (63Z10EA)",
      "price": "389 900 ₸"
    },
    {
      "name": "Ноутбук Asus VivoBook S14 i5 1135G7 / 8ГБ / 512SSD / 14 / Win11 / (S433EA-KI2331W)",
      "price": "319 990 ₸"
    }
  ]
]

я получаю ошибку:
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Ответы

▲ 0Принят

Предположительно, тут 2 проблемы.

Первая: судя по ошибке "Objects are not valid as a React child (found: [object Promise])", вы возвращаете промис. Вероятно, забыли указать await или .then().

Вторая: вы возвращаете массив массивов. React такое обработать не может. Как один из фиксов можно использовать метод массива Array.prototype.flat(). Он создает новый массив с элементами на одной глубине:

const arr = data.map((arr, id) =>{
      if(id === 0){return(<div></div>)}
      console.log(arr)
      return(arr.map((product, id) => {
        console.log(product)
        return(<div>name: {product.name}price: {product.price}</div>)
      }))
    });
const result = arr.flat();