Question

我有两个问题，但是我相信第二个问题将在第一个问题解决后得到解决（问题标题）。

我正在从woocommerce接收JSON。我当然可以在客户端使用fetch来调用这些数据，并且在代码中看起来像这样：

async componentDidMount() {
  const response = await fetch('/products');
  const json = await response.json();
  this.setState({
    data: json,
  })
// other code ....
}

在浏览器中，我收到有关我的json数据的错误：

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

console.log中出现以下错误：

index.js:6 GET http://localhost:3000/products 500 (Internal Server Error)
index.js:6 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

刷新网页后，所有内容都消失了，一切都变成了A-OKAY，为什么？以及如何解决这个问题？

在控制台和刷新页面时，我的JSON数据返回一个对象-没有“ <”。我也不知道为什么会出现上面显示的500错误？我正在学习node.js-所以我认为这是服务器端的问题，因为在将代码拆分到客户端和服务器之前我没有任何问题。

帮助？

Answer 1

发生的事情是您执行的数据调用需要花费一些时间来加载数据。直到this.state.data为null。错误

意外的令牌

是因为您正在尝试处理this.state.data但发现为空。您需要确保处理数据为空时需要显示的内容。

另外，我认为您不需要在response.json（）之前等待 500服务器错误是服务器端的问题。

Answer 2

要停止整个刷新页面问题；我必须修复服务器文件（当然是node.js）

我的获取请求最初看起来像这样：

let response;
app.get('/products', (req, res, err) => {
  WooCommerce.get('products', function(err, data, res) {
    response = res;
  });
  res.status(200).json(JSON.parse(response));
});

这里的问题是我用获取来调用/products，该URL除了指向另一个API调用外没有指向其他任何东西，只有在我强迫它通过第一个URL调用（我猜是使用页面刷新）后，该调用才被调用。请原谅我的理解。

正确的代码是先调用Woocommerce api，然后将其响应传递到/product url，这样我就可以在前端提取它，就像这样；

let response;
  WooCommerce.get('products', function(err, data, res) {
    response = res;
    app.get('/products', (req, res, err) => {
      if (res.status(200)) {
      res.status(200).json(JSON.parse(response));
    } else {
      console.log('theres an error', err);
    }
  })
});

而且Tarrrrdaaa没有刷新问题/ SyntaxError错误！！！

Json数据仅在刷新页面后才加载正确吗？

2 个答案: