未处理拒绝(SyntaxError)：位于0位置的JSON中的意外令牌<

Question

每当我尝试使用来自不同组件的全局变量时，我都会得到“未处理的拒绝(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,
        })
      })
  }

Answer 1

您已经说过，第一个块(Brewery.js)工作，而第二个块(Random.js)不工作。

在componentDidMount中创建一个全局变量并在另一个组件中依赖它，这无疑是很糟糕的做法。显然，第二个组件是在第一个组件之前挂载的，所以window.url是undefined，所以您最终请求的是"undefined"，而不是正确的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)中，使用该函数而不是重复逻辑。

这就引出了这样的问题:如何使该功能对两个组件都可用？

两个答案：

1. 如果您正在使用模块(我强烈建议使用)，请将其放在它们都使用的模块中： loadBreweriesIntoState.js： 导出默认函数loadBreweriesIntoState() { //…} Brewery.js： 从“./loadBreweriesIntoState.js”导入loadBreweriesIntoState；// .componentDidMount() { loadBreweriesIntoState(this)；} Random.js： 从“./loadBreweriesIntoState.js”导入loadBreweriesIntoState；// .componentDidMount() { loadBreweriesIntoState(this)；}
2. 如果您不使用模块，请将其放在两个组件脚本之前包含的脚本中(正在开发中)，并将其设置为包含在您的包(用于生产)之前。

如果您希望将逻辑保留在组件中，那么这两个选项也适用:只需将url作为某种Config.js的导出(或它创建的全局输出)即可。