Question

每当尝试使用其他组件中的全局变量时，我都会不断收到“未处理的拒绝（SyntaxError）：意外的令牌<在JSON中的位置0”错误，在这种情况下，当我使用Brewery.js中的全局变量时在Random.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）中，使用该函数而不是重复逻辑。

这带给我们以下内容：您如何使该功能可用于两个组件？

两个答案：

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

loadBreweriesIntoState.js：

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

Brewery.js：

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

Random.js：

import loadBreweriesIntoState from "./loadBreweriesIntoState.js";

// ...

    componentDidMount() {
        loadBreweriesIntoState(this);
    }

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

如果您也想将逻辑保留在组件中，则可以使用这两个选项：只需将url导出为某种Config.js（或其创建的全局变量）即可。

未处理的拒绝（SyntaxError）：JSON中位置0 React

1 个答案: