componentDidMount 和 XMLHttpRequest 两次加载数据无效 JSON

Question

我正在使用简单的快速静态服务器来管理静态文件。

app.use(express.static(path.join(__dirname, 'public')));

这是一个webpack.config.js文件

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()    
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      query: {
        presets: ['es2015','react']
      }
    }]
  },
  devtool: 'eval-source-map'
}

这是我的 Question React 组件 question.js

import React from 'react';
import ReactDOM from 'react-dom';

const stackAddress = 'https://api.stackexchange.com/2.1/questions?site=Whosebug';

class Question extends React.Component{
  constructor(){
    super();
    this.loadDataFromStack = this.loadDataFromStack.bind(this);
    this.state = {
      itemList: []
    }
  }

  componentDidMount() {
    console.log('Load data from Stack');
    this.loadDataFromStack()
  }

  loadDataFromStack(){
    var request = new XMLHttpRequest();
    request.open('GET',stackAddress, true);
    request.onreadystatechange = () => {
      console.log(JSON.parse(request.responseText));
    };
    request.send()
  }
  render(){
    return <div>
      <h1>Questions</h1>
      <ul></ul>
    </div>
  }
}

export default Question

当我是运行服务器时，我收到了 next error 并且我注意到我收到了两次请求，正如您在屏幕上看到的那样。

但如果我使用 jQuery.get 或 jQuery.ajax 方法，效果会很好

有人能指出问题出在哪里吗？

提前致谢。

Answer 1

我不是 100% 确定这可能是问题所在，但通常情况下，在执行 XMLHttpRequest 时，您应该在调用打开之前设置您的处理程序。所以我会这样尝试：

loadDataFromStack(){
  var request = new XMLHttpRequest();
  request.onreadystatechange = () => {
    if (request.readyState == 4 && request.status == 200) {
       console.log(JSON.parse(request.responseText));
    }
  };
  request.open('GET',stackAddress, true);
  request.send()
}

注意 request.onreadystatechange = () 应该在 request.open('GET',stackAddress, true);

之前调用

componentDidMount 和 XMLHttpRequest 两次加载数据无效 JSON

componentDidMount and XMLHttpRequest loaded data twice with not valid JSON

javascript

ajax

xmlhttprequest

node.js

reactjs