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

如果出现此意外令牌错误，请注意字符位置正好位于json响应中第二项的开头。

当我更改fetchDawgsJson以限制对此项的响应时，如下所示：

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吗？

Index.js：无法读取未定义

1 个答案: