Javascript React应用程序未解析提取路由：未处理的拒绝（SyntaxError）：意外令牌<；在JSON中的位置0

express服务器中的My fetch source（'wx'）正在返回： 未处理的拒绝（SyntaxError）：位置0处的JSON中出现意外标记 在下面的获取行。“wx”的获取源返回404。（虽然这是为最终的天气服务设置的，但此处的任何测试都返回404）

这就是反应：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {wx: []}

  componentDidMount() {
    fetch('/wx').then(res => res.json()).then(wx => this.setState({ wx }));
  }

  render() {
    return (
      <div className="App">
        <h1>Weather</h1>
        {this.state.wx.map(weather =>
          <div key={weather.id}>{weather.main}>{weather.description}</div>
        )}
      </div>

    );
  }
}

export default App;

---

为什么返回404？我能做些什么？

您的错误与您收到的404错误有关

res.json（）

尝试将响应主体转换为json对象，但失败，因为响应是HTML文档

您可以做的是在返回json之前检查响应是否成功

fetch('/wx').then(res => {
  if(res.status === 200) return res.json();
  else return { error: 'there was an error with response' }
}).then(wx => {
  if(wx.error) { /* handle error here */ }
  else {
    this.setState({ wx })
  }
});

---

您的错误与您收到的404错误有关

res.json（）

尝试将响应主体转换为json对象，但失败，因为响应是HTML文档

您可以做的是在返回json之前检查响应是否成功

fetch('/wx').then(res => {
  if(res.status === 200) return res.json();
  else return { error: 'there was an error with response' }
}).then(wx => {
  if(wx.error) { /* handle error here */ }
  else {
    this.setState({ wx })
  }
});

---

听起来您忘记在package.json中设置代理端口，所以它返回html。我也有同样的问题，我只是在我的package.json中设置了我的代理：“proxy”：“，”

听起来你忘记在package.json中设置代理端口了，所以它返回html。我也遇到了同样的问题，我只是在我的包中设置了我的代理。json：“proxy”：“”

奇怪…响应应该是直接的json…但html确实解释了404。所以是的，必须先在那个地方设陷阱。谢谢。奇怪…响应应该是直接的json…但是html确实解释了404。所以是的，必须先在那个地方设陷阱。谢谢。这边：`fetch（'）`。没有.json扩展名的项这种方式：`fetch（'）`。没有.json扩展名的项