Redux 应用程序错误：未捕获（承诺中） SyntaxError：意外令牌 < 在 position 0 处的 JSON

Question

我有这样的错误：

index.js:8 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

index.js（动作）：

import { days } from "../components/app";
export function fetchData (day) {
    return async (dispatch) => {dispatch({ type: 'LOAD_DATA_START', day });
    const response = await fetch(`....`); 
    const data = (await response.json()).body; 
    dispatch({ type: 'LOAD_DATA_END', data });
    dispatch({ type: 'SET_SHIFT', data }); 
    } 
}

如何修复此错误？

Answer 1

由于该超链接后面的 JSON 文件是有效的，我怀疑您有网络错误并且正在接收标准的 HTML 错误页面，该页面以<html>开头。 这就是在我调试过的 99% 的情况下出现SyntaxError: Unexpected token < in JSON at position 0错误的原因。

因此，如果您实际上收到了具有正确类型的文件作为响应，请在控制台中仔细检查。

编辑：

你有两个问题：

1) API 希望您使用 HTTPS 获取 JSON 文件。 因此，只需在操作中的 url 前面添加：

import { days } from "../components/app";
export function fetchData(day) {
  return async dispatch => {
    dispatch({ type: "LOAD_DATA_START", day });
    const response = await fetch(`https://api.iev.aero/api/flights/${day}`);
    const data = (await response.json()).body;
    dispatch({ type: "LOAD_DATA_END", data });
    dispatch({ type: "SET_SHIFT", data });
  };
}

2) URL 所需的{day}参数未正确传递。 因此，您如何传递道具或 state 或 react 和 redux 之间存在问题。 不幸的是，我不能说确切的解决方案是什么，因为我没有一起使用 react+redux。 但是，当我将{day}替换为您提供的日期字符串之一时export const days = ["23-08-2019", "24-08-2019", "25-08-2019"]; , 然后 API 返回正确的 JSON 文件。

所以修复HTTPS问题，然后尝试修复{day}问题。 然后 JSON 应该正确返回。 您仍然会遇到有关过滤的错误，但这与 json 文件的问题无关，可以单独解决。

Answer 2

此错误基本上意味着您尝试对 JSON 解析的内容不是 object。 也许响应被包装在一个数组中，比如

[{
   "name": "json"
}]

如果是这样，您将收到该错误。

Answer 3

好的，我将您的代码沙箱文件Actions > index.js编辑为：

import { days } from "../components/app";
export function fetchData(day) {
  return async dispatch => {
    dispatch({ type: "LOAD_DATA_START", day });
    const response = await fetch(`api.iev.aero/api/flights/${day}`);
    const data = (await response.text()).body;
    dispatch({ type: "LOAD_DATA_END", data });
    dispatch({ type: "SET_SHIFT", data });
  };
}

Redux 应用程序错误：未捕获（承诺中） SyntaxError：意外令牌 < 在 position 0 处的 JSON

问题描述

3 个解决方案

解决方案1
2 已采纳 2019-11-08 13:45:07

解决方案2
0 2019-11-08 13:42:47

解决方案3
0 2019-11-08 13:53:15

Redux 应用程序错误：未捕获（承诺中） SyntaxError：意外令牌 &lt; 在 position 0 处的 JSON

问题描述

3 个解决方案

解决方案1 2 已采纳 2019-11-08 13:45:07

解决方案2 0 2019-11-08 13:42:47

解决方案3 0 2019-11-08 13:53:15

Redux 应用程序错误：未捕获（承诺中） SyntaxError：意外令牌 < 在 position 0 处的 JSON

解决方案1
2 已采纳 2019-11-08 13:45:07

解决方案2
0 2019-11-08 13:42:47

解决方案3
0 2019-11-08 13:53:15