通过 fetch 获取请求并做出反应答案

【问题标题】：Get request with fetch and react通过 fetch 获取请求并做出反应
【发布时间】：2017-11-21 20:57:15
【问题描述】：

这可能是一个非常愚蠢的问题，但我在网上找不到任何解决方案，请不要抨击我。我设置了一个 create-react-app 并想在表格中显示一些数据。

这是我的 JSON：

[ {
  "unitid" : 29,
  "createddate" : 1510324778000,
  "latitude" : 49.402008056640625,
  "longitude" : 11.901968002319336,
  "senderid" : 6,
  "signalstrength" : 37
}, {
  "unitid" : 34,
  "createddate" : 1510563384000,
  "latitude" : 49.22679901123047,
  "longitude" : 12.845210075378418,
  "senderid" : 8,
  "signalstrength" : 0
},......

我的表格需要一个包含所有属性的 JSON 数组才能正确显示每一列。

这是我尝试从我的端点获取数据的代码：

class App extends Component {
constructor(props){
    super(props);

    this.state = {
        vehicleList: [],
    };
}

componentDidMount(){
    fetch('endpoint-link', {mode: 'no-cors', method: 'get'})
        .then(response => response.json())
        .then(result => {
            this.setState({vehicleList: result.vehicleList})
            console.log(result)
        })

        .catch(error => {
            this.setState({isLoaded: true, error})
            console.log(error)
        });
}

render() {
    const {vehicleList} = this.state;
    console.log(vehicleList);.......

当我在 Chrome 中打开 Devtools 时，选择“网络”，我可以看到端点已知并且数据已找到，但不知何故 fetch 方法没有将 JSON 加载到数组中。

【问题讨论】：

在“这是我的 JSON”下，你只有一个数组。它没有 vehicleList 属性。然而，您正在将result.vehicleList 放入您的状态。 JSON 是否有 vehicleList 属性，还是没有？
不，它没有。你会为此推荐什么？

标签： javascript json reactjs fetch

【解决方案1】：

您的 JSON 没有 vehicleList 属性。它只有一系列车辆。所以你需要把它放在你的状态：

this.setState({vehicleList: result})

【讨论】：

它仍然无法正常工作。当我在 Chrome-Dev 中打开控制台时，我看到我在代码中放入的控制台日志的空数组，而且它似乎直接跳转到 .catch 错误，因为它给了我这个警告“输入意外结束”。
@Aleks 这表明 JSON 可能无效。您确定 JSON 有效吗？你能把它复制到验证器中吗？
刚刚测试了它，两个验证器给了我积极的结果。还有什么问题？
@Aleks 如果您单击“网络”选项卡中的请求并查看“响应”选项卡，那里有完整的 JSON 吗？
@Aleks 不太确定还有什么建议。您能否将完整的错误消息和堆栈跟踪添加到您的问题正文中？

【解决方案2】：

问题是这样的 -> ...{mode="no-cors"...} 请参阅此帖子以修复它：Handle response - SyntaxError: Unexpected end of input

【讨论】：