Попытка console.log свойств из API Express / Mongo, используя интерфейс React.js - PullRequest
Новая
       11

Попытка console.log свойств из API Express / Mongo, используя интерфейс React.js

0 голосов
/ 10 февраля 2019

Я собираю очень простое вымышленное приложение для кроссовок, используя стек MERN.Я бы не назвал себя новичком, но я тоже не эксперт.Я смог прекрасно создать бэкэнд и сгенерировать json rest-api.Моя проблема на переднем крае.Я просто пытаюсь console.log свойство из объекта.

Например, у меня есть маршрут, который получает массив объектов кроссовок.В каждом объекте он содержит информацию, такую ​​как Модель тапки, Colorway, Год выпуска тапок, здесь предварительный просмотр объекта. 

{
    "_id": "5c5dff42489e28576c28cd9e",
    "model": "Air Jordan 11",
    "colorway": "Win Like 82",
    "year": 1997,
    "text": "Cool kicks",
    "mainimage": "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664062/xjwkpbqwl1pmawpocygx.jpg",
    "subimage_1": "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664062/y8h1biytup4rgxqrm2qe.jpg",
    "subimage_2": "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664063/wrwska4tnog4vselcwp7.jpg",
    "subimage_3": "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664063/h9dyki3gdgfjcccchhia.jpg",
    "subimage_4": "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664064/qwrsabomnsqk7pjyx5ss.jpg",
    "user": "5c4b4635c9de365620cd797b",
    "likes": [],
    "comments": [],
    "date": "2019-02-08T22:14:26.127Z",
    "__v": 0
}

Я использую деструктуризацию для получения данных тапок из моего приложения (Redux) состояние: const { sneakers } = this.props.sneaker;

Когда я пытаюсь console.log массив объектов, используя console.log(sneakers), он работает как положено, вот результаты: 


(3) [{…}, {…}, {…}]


0:
colorway: "Win Like 82"
comments: []
date: "2019-02-08T22:14:26.127Z"
likes: []
mainimage: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664062/xjwkpbqwl1pmawpocygx.jpg"
model: "Air Jordan 11"
subimage_1: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664062/y8h1biytup4rgxqrm2qe.jpg"
subimage_2: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664063/wrwska4tnog4vselcwp7.jpg"
subimage_3: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664063/h9dyki3gdgfjcccchhia.jpg"
subimage_4: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549664064/qwrsabomnsqk7pjyx5ss.jpg"
text: "Cool kicks"
user: "5c4b4635c9de365620cd797b"
year: 1997
__v: 0
_id: "5c5dff42489e28576c28cd9e"
__proto__: Object


1:
colorway: "taxi"
comments: []
date: "2019-02-08T19:20:59.467Z"
likes: []
mainimage: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653655/gag2aktdhyfru5s5dnni.jpg"
model: "Air Jordan 12"
subimage_1: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653656/wcg9jmo84cl8mhxb2iwl.jpg"
subimage_2: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653656/mxistpujhh0xikzqwcu0.jpg"
subimage_3: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653657/dcp1y2jrqz2nkgyhuwfr.jpg"
subimage_4: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653657/dyee9uzb7aj1dp46rlnj.jpg"
text: "the holy grails"
user: "5c4b4635c9de365620cd797b"
year: 1997
__v: 0
_id: "5c5dd69beaef7140e0d2926d"
__proto__: Object


2:
colorway: "Obsidian"
comments: []
date: "2019-02-03T23:01:21.937Z"
likes: []
mainimage: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549234878/yzdoot1cf3jnbq31ndkg.jpg"
model: "Air Jordan 12"
subimage_1: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549234879/jbjw8hngvieyvnizfb8b.jpg"
subimage_2: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549234880/qu1gguxpfp2mapd5ivo2.jpg"
subimage_3: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549234880/gcntdjlznjjbxifsmufl.jpg"
subimage_4: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549234881/ck9emeurmaqleizaqe1e.jpg"
text: "Awesome kicks"
user: "5c4b4553c9de365620cd797a"
year: 1997
__v: 0
_id: "5c5772c10ffd0f2e789999b2"
__proto__: Object
length: 3
__proto__: Array(0)

Если я хочу сказатьнапример, просто второй кроссовок, который я использую:

console.log(sneakers[1])

Я получаю то, что ожидал: 

{_id: "5c5dd69beaef7140e0d2926d", model: "Air Jordan 12", colorway: "taxi", year: 1997, text: "the holy grails", …}
colorway: "taxi"
comments: []
date: "2019-02-08T19:20:59.467Z"
likes: []
mainimage: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653655/gag2aktdhyfru5s5dnni.jpg"
model: "Air Jordan 12"
subimage_1: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653656/wcg9jmo84cl8mhxb2iwl.jpg"
subimage_2: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653656/mxistpujhh0xikzqwcu0.jpg"
subimage_3: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653657/dcp1y2jrqz2nkgyhuwfr.jpg"
subimage_4: "http://res.cloudinary.com/dwgjvssdt/image/upload/v1549653657/dyee9uzb7aj1dp46rlnj.jpg"
text: "the holy grails"
user: "5c4b4635c9de365620cd797b"
year: 1997
__v: 0
_id: "5c5dd69beaef7140e0d2926d"
__proto__: Object

Однако, когда я пытаюсь получить свойство только изодин кроссовок, скажем, например, цветовой путь от второго кроссовка, который я использую:

console.log(sneakers[1].colorway)

И я сталкиваюсь с этой ошибкой TypeError: Cannot read property 'colorway' of undefined.

Янемного трудно понять, почему.Я подумал, так как я могу записывать данные из одного кроссовка, если я хочу, я должен иметь возможность регистрировать только одно свойство из этого кроссовка.Очевидно, есть кое-что, что я делаю не совсем правильно, но я не могу понять, что.

1 Ответ

0 голосов
/ 10 февраля 2019

Скорее всего, объект данных печатается для удобства на уровне браузера, но на самом деле не готов к доступу к свойству.Чтобы обойти эту проблему, я успешно использовал этот шаблон: 

const SomeComponent = ({sneakers}) => {
  return (
    <div>
    {
      sneakers && sneakers.map(sneaker => {
        return (
          <div>{sneaker.colorway}</div>
        )
      })
    }
    </div>
  )
}

export default SomeComponent;
...