Запрос AJAX не устанавливает this.state.data в моем компоненте React.

Я недавно работал с ReactJS и имел проблему с настройкой состояния при использовании запроса AJAX.Запрос AJAX не устанавливает this.state.data в моем компоненте React.

Запрос AJAX делает запрос на сервере и получает код 200, поэтому я знаю, что запрос API работает хорошо. Однако компонент React, похоже, не содержит this.state.data.

Вот код компонента:

export class Experiences extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: [] 
    }; 
    } 

    loadExperiencesFromServer() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: (data) => { 
     this.setState({ 
      data: data 
     }) 
     }, 
     error: (xhr, status, err) => { 
       console.error(this.props.url, status, err.toString()); 
     } 
    }); 
    } 

    componentDidMount() { 
    this.loadExperiencesFromServer(); 
    } 

    render() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
      <p>{this.state.data}</p> 
     </div> 
    ); 
    } 
};

И это, как я рендеринга компонент:

ReactDOM.render(<Experiences url='/about_me/experiences/' />, document.getElementById('genomics-geek-container'));

Когда я попал в API напрямую, я получаю такой ответ:

$ http http://127.0.0.1:8000/about_me/experiences/ 

HTTP/1.0 200 OK 
Allow: GET, POST, HEAD, OPTIONS 
Content-Type: application/json 
Date: Wed, 27 Apr 2016 02:15:40 GMT 
Server: WSGIServer/0.2 CPython/3.5.1 
Vary: Accept, Cookie 
X-Frame-Options: SAMEORIGIN 

{ 
    "count": 1, 
    "next": null, 
    "previous": null, 
    "results": [ 
     { 
      "company": "Mike", 
      "created": "2016-04-27T01:30:50.425111Z", 
      "degree": "test", 
      "description": "test", 
      "ended": "2016-04-21", 
      "experience_type": 1, 
      "is_current_position": true, 
      "location": "test", 
      "owner": "geek", 
      "position": "test", 
      "started": "2016-04-27" 
     } 
    ] 
}

Итак, я знаю, что API возвращает данные, а компонент React отображается в моем браузере, но нет данных по какой-то причине загружается в компонент. Что мне не хватает? Заранее спасибо за помощь!

источник

2016-04-27 genomics-geek

Вы пробовали консольное протоколирование внутри вашей функции «успеха»? Проверьте, что происходит, когда вы регистрируете 'this' – ZekeDroid

@ZekeDroid. Так что это работало все время, проблема была в функции рендеринга. По-видимому, мне нужно отобразить элементы в ответе. Спасибо за совет! –

Вы теряете контекст этого.

в конструкторе связать это с вашей пользовательской функцией

constructor() { 
    super(); 
    this.state = { 
     data: [] 
    }; 
    this.loadExperiencesFromServer = this.loadExperiencesFromServer.bind(this) 
}

источник

2016-04-27 02:23:28

Запрос AJAX не устанавливает this.state.data в моем компоненте React.

ответ

Смежные вопросы