尝试使用 React.js 前端从 Express/Mongo api 控制台记录属性答案

【问题标题】：Trying to console.log properties from an Express/Mongo api, using a React.js frontend尝试使用 React.js 前端从 Express/Mongo api 控制台记录属性
【发布时间】：2019-02-10 00:02:52
【问题描述】：

我正在使用 MERN 堆栈构建一个非常简单的虚构运动鞋应用程序。我不会称自己为新手，但我也不是专家。我能够很好地创建后端并生成一个 json rest-api。我的问题在前端。我只是想从一个对象中控制台记录一个属性。

例如，我有一个获取运动鞋对象数组的路由。在每个对象中，它包含诸如运动鞋型号、配色、运动鞋发布年份等信息，这里是对象的预览。

{
    "_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(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。

我有点难以弄清楚为什么。我想既然我可以从一只运动鞋中记录数据，如果我愿意的话，我应该只能从那只运动鞋中记录一个属性。显然，有些事情我做得不太对，但我不知道是什么。

【问题讨论】：

嗨，欢迎来到 SO。感谢您发布数据示例，但您能否也发布您的代码？
他的代码发布在@MatthewHerbst，只是一些console.log 声明。

标签： javascript reactjs rest express react-redux

【解决方案1】：

最有可能的是，数据对象作为浏览器级别的便利打印，但实际上并未准备好进行属性访问。为了规避这个问题，我成功地使用了这个模式：

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

export default SomeComponent;

【讨论】：