Index.js：无法读取未定义的属性“dawgs”

Question

我正在尝试使用由 JSON 响应提供的 index.js 来填充网格。

我的 JSON 响应如下：

{"id":"0-nm7ee1ue9bzjbstn9ygv6lxr","size":29,"price":768,"face":"( .-. )","date":"Mon Jul 31 2017 04:28:45 GMT-0400 (EDT)"}
{"id":"1-ucdvpte68e22yw7w01j68ncdi","size":23,"price":115,"face":"( .o.)","date":"Sat Aug 05 2017 01:08:36 GMT-0400 (EDT)"}
{"id":"2-6ev861slycro0temr3vb98jjor","size":13,"price":421,"face":"( `·´ )","date":"Sun Aug 06 2017 17:08:18 GMT-0400 (EDT)"}
{"id":"3-mutgdpkeqipbe2evypfmbzkt9","size":35,"price":6,"face":"( ° ͜ ʖ °)","date":"Wed Aug 02 2017 19:30:29 GMT-0400 (EDT)"}
{"id":"4-fjimlap3tposcqib38lz93sor","size":16,"price":716,"face":"( ͡° ͜ʖ ͡°)","date":"Thu Jul 27 2017 02:23:56 GMT-0400 (EDT)"}
{"id":"5-7qlbahzmtzt77gpsvuh68khuxr","size":18,"price":483,"face":"( ⚆ _ ⚆ )","date":"Mon Aug 07 2017 21:43:09 GMT-0400 (EDT)"}
{"id":"6-f8k9eygn92hbzqp0dvx3jo47vi","size":37,"price":757,"face":"( ︶︿︶)","date":"Mon Jul 24 2017 07:59:49 GMT-0400 (EDT)"}
{"id":"7-i816dwwdy3kxv5c0hgz4zpvi","size":24,"price":915,"face":"( ﾟヮﾟ)","date":"Thu Aug 03 2017 04:14:48 GMT-0400 (EDT)"}
{"id":"8-w06tgl269c8qckt4j7vdq85mi","size":29,"price":309,"face":"(\\/)(°,,,°)(\\/)","date":"Thu Jul 27 2017 04:11:38 GMT-0400 (EDT)"}
{"id":"9-jy6zjva7bdc2wl9vl05zpk3xr","size":21,"price":620,"face":"(¬_¬)","date":"Tue Jul 25 2017 13:54:51 GMT-0400 (EDT)"}

我创建了 index.js 文件，内容如下：

import axios from 'axios';

export const RECEIVE_DAWGS = 'RECEIVE_DAWGS';

function receiveDawgs(json){
  const{dawgs} = json.data;
  return{
    type: RECEIVE_DAWGS,
    dawgs
  }
}

function fetchDawgsJson(){
  return axios.get('http://localhost:8000/api/products', {responseType: 'stream'})
  .then(({data}) => { 
    const xdjson = data.split('\n').slice(0, -1)
    const json = xdjson.map((item, i) => JSON.parse(item))
    return json

    })

}

export function fetchDawgs(){
  return function(dispatch){
    return fetchDawgsJson()
    .then(json  => dispatch(receiveDawgs(json)))
  }
}

我遇到以下错误：

Uncaught (in promise) TypeError: Cannot read property 'dawgs' of undefined
    at receiveDawgs (index.js:5)
    at index.js:27
    at <anonymous>

当我这样写 index.js 时：

export const RECEIVE_DAWGS = 'RECEIVE_DAWGS';

function receiveDawgs(json){
  const{dawgs} = json.data;
  return{
    type: RECEIVE_DAWGS,
    dawgs
  }
}

function fetchDawgsJson(){
  return fetch('http://localhost:8000/api/products')
  .then(response => 
      response.json()

  )

}

export function fetchDawgs(){
  return function(dispatch){
    return fetchDawgsJson()
    .then(json  => dispatch(receiveDawgs(json)))
  }
}

我遇到以下错误：

localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token { in JSON at position 126

对于这个 Unexpected token 错误，请注意字符位置恰好位于 json 响应中第二项的开头。

当我更改 fetchDawgsJson 以将响应限制为 1 项时：

function fetchDawgsJson(){
  return fetch('http://genie:8000/api/products?limit=1')
  .then(response => 
      response.json()

  )

}

，我遇到了和使用axios时一样的错误：

Uncaught (in promise) TypeError: Cannot read property 'dawgs' of undefined
    at receiveDawgs (index.js:3)
    at index.js:23
    at <anonymous>

我确定我做错了什么。 任何建议或见解表示赞赏。谢谢。

Answer 1

这是无效的 JSON。

您正在输出一堆对象 - 它们需要被包装到一个数组中

此外，您假设响应将包含一个具有 dawgs 属性的对象

const{dawgs} = json.data;

这意味着数据必须以以下方式到达：

{
    "dawgs": [
{"id":"0-nm7ee1ue9bzjbstn9ygv6lxr","size":29,"price":768,"face":"( .-. )","date":"Mon Jul 31 2017 04:28:45 GMT-0400 (EDT)"},
{"id":"1-ucdvpte68e22yw7w01j68ncdi","size":23,"price":115,"face":"( .o.)","date":"Sat Aug 05 2017 01:08:36 GMT-0400 (EDT)"},
       .... more
     ]
}

最后，当您有responseType: 'stream' 时，响应中的数据道具将包含一个流。你在服务器上使用 axios 吗？