Javascript 未处理的拒绝（SyntaxError）：意外标记<；在位置0处的JSON中

每当我尝试使用来自不同组件的全局变量时，我总是收到“未处理的拒绝（SyntaxError）：意外的标记<在JSON中的位置0”错误，在这种情况下，当我在Random.js中使用Brewery.js中的全局变量时

Brewery.js

  componentDidMount() {
    window.url = "https://api.openbrewerydb.org/breweries";
    fetch(window.url)
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

Random.js

  componentDidMount() {
    fetch(window.url)
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

---

您说过第一个块（Brewery.js）有效，但第二个块（Random.js）无效

在

componentDidMount

中创建一个全局变量并在另一个组件中依赖它肯定是一种糟糕的做法。显然，第二个组件是在第一个组件之前安装的，因此

窗口。url

是

未定义的
，因此您最终请求的是
“未定义的”
，而不是正确的url

首先，不要重复你自己。取而代之的是，使用一个函数获取酿酒厂，并重用它：

function getBreweries() {
  return fetch(window.url)
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        });
        return response.json();
    });
}

您甚至可以让它处理设置状态：

function loadBreweriesIntoState() {
  return fetch(window.url)
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        });
        return response.json();
    })
    .then(breweries => {
        component.setState({breweries});
    })
    .catch(error => {
        component.setState({error: "Error loading the list of breweries."});
    });
}

然后，在两个组件（Random.js和Brewery.js）中，使用该函数，而不是重复逻辑

这让我们想到：如何使这两个组件都可以使用该功能

两个答案：

如果您使用的是模块（我强烈建议），请将其放在他们都使用的模块中：

loadBreweriesIntoState.js
：

export default function loadBreweriesIntoState() {
    // ...
}

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

Brewery.js
：

export default function loadBreweriesIntoState() {
    // ...
}

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

Random.js
：

export default function loadBreweriesIntoState() {
    // ...
}

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }


如果您不使用模块，请将其放入在两个组件脚本（开发中）之前包含的脚本中，并设置为在捆绑包中包含在它们之前（用于生产）

如果您想保留组件中的逻辑，这两个选项也适用：只需将
url
导出为某种
Config.js
（或它创建的全局文件）。
最可能的原因是您收到的文本不是JSON。原因之一可能是，在尝试解析结果之前，您没有检查请求是否成功。如果服务器在请求失败时使用HTML而不是JSON进行响应（可能是一个标准错误页面），那么您将得到该错误。您需要检查
响应。ok
。（不仅仅是你，这是一个非常常见的错误，我写了它。）所以：
。然后（response=>{if（！response.ok）{throw new error（“error here”）；}return response.json（）；}）
关于该代码的另外两个注释，FWIW:1。您没有处理错误，您确实应该这样做：添加一个
.catch
。2.如果您在最后一个
中使用参数名，那么
处理程序
breweries
而不是
数据
，您可以使用速记属性表示法：
。然后（breweries=>{this.setState（{breweries}）；}）
我已经按照您所说的方式修复了代码；但是，我仍然在“return-response.json（）；}”行中遇到相同的错误，该行告诉您即使成功，服务器也不会发送回json。查看浏览器开发工具的“网络”选项卡，查看它发送回的内容，并查看正在调用的端点的文档，以确保为其提供了正确的信息。