ReactJs Ajax Get

Question

Я пытаюсь получить нормальный вызов get ajax для выполнения внутри компонента actJs с помощью onClick кнопки. Когда я пытаюсь использовать следующий код, ничего не происходит, но API работает и работает. Он даже ничего не записывает в консоль браузера. Что я делаю не так? Я новичок в реагировании, поэтому я прошу прощения. Я использую responseJS.net с mvc 5 и web api 2. Я просто смотрю, смогу ли я поразить функцию webapi v2 через ее маршрут. Сам маршрут отлично работает сам по себе, и я могу вызвать точку останова, но не из события ReactionJs onClick

var HomeReact = React.createClass({
getInitialState: function () {
    return {
        welcomeMsg: this.props.welcomeMsg,
    };
},

testApi: function () {
    console.log("Clicking");
    $.ajax({
        url: "/api/reg/testapi",
        type: 'GET',
        cache: false,
        dataType: 'json',
        success: function (response) {
            alert(response)
        },
        error: function (error) {
            alert("fail - " + error);
        }

    });
},

render() {
    return (
        <div id="welcomeHolder" align="center">
            {this.state.welcomeMsg}
            <br />
            <button onClick={this.testApi}>React Learning Api Test</button>
        </div>
    );
}

});

Answer 1

В этом случае вы должны дать полный URL-адрес в вызове ajax, как это

URL: " http://localhost:666/api//reg/testapi",

Answer 2

Что-то не так с вашим API. Если вы используете рабочий URL "https://facebook.github.io/react-native/movies.json", это будет работать.

class Test extends React.Component {
  constructor(props){
     super(props);
      
      this.state = {
       welcomeMsg: "Welcome message"
      }
    }
    
    testApi(){
      $.ajax({
          url: "https://facebook.github.io/react-native/movies.json",
          type: 'GET',
          cache: false,
          dataType: 'json',
          success: function (response) {
           console.log(response);
          },
          error: function (error) {
              alert("fail - " + error);
          }

      });
    }
    
  render(){
     return (
       <div id="welcomeHolder" align="center">
            {this.state.welcomeMsg}<br />
            <button onClick={this.testApi.bind(this)}>React Learning Api Test</button>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Вот ссылка на скрипку.