Как задать нужный контекст?
Здравствуйте.
class Data {
displayData(data){
log(data);
}
getData(){
let rqst = new XMLHttpRequest();
rqst.addEventListener('load', () => {
if(rqst.status === 200) {
this.displayData(rqst.responseText); /*Нужный контекст*/
}
})
}
}
let any = new Data();
any.getData();
как задать нужный контекст, контекст класса для displayData? |
Luca, а конкретнее?
|
конкретнее? сами просили )
import React, { Component } from 'react';
class Json extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
name: '',
profession: '',
age: 0
};
}
displayName(json){
try {
this.setState({name: json.name});
} catch (e) {
alert("Exception occured: " + e.message);
}
}
displayProfession(json){
try {
this.setState({profession: json.profession});
} catch (e) {
alert("Exception occured: " + e.message);
}
}
displayAge(json){
try {
this.setState({age: json.age});
} catch (e) {
console.log("Exception occured: " + e.message);
}
}
displayData(data){
try {
console.log(data);
let json = JSON.parse(data);
this.displayName(json);
this.displayProfession(json);
this.displayAge(json);
} catch (e) {
console.log("Exception occured: " + e.message);
}
}
getData() {
let request = new XMLHttpRequest();
let url = 'http://zf.loc';
request.open('GET', url);
request.addEventListener('load',
(function() {
if (request.status === 200) {
this.setState(JSON.parse(request.responseText));
} else {
console.log("Server Error: " + request.status);
}
}).bind(this) /*Вот здесь я пытаюсь вызвать displayData или setState и даже с .bind(this), но получаю "Type error: setState is not a function" или "displayName is not a function"*/
,false);
request.addEventListener('error', function () {
console.log("Can't Make AJAX Request");
}, false);
request.send();
}
componentDidMount() {
this.timerID = setInterval(
this.getData,
3000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
render() {
return (
<div>
<h1>Hello, {this.state.name}</h1>
<h2>Your profession is {this.state.profession}.</h2>
<h2> Your age {this.state.age}</h2>
</div>
);
}
}
export default Json;
"Балуюсь" с React и вот не видит у меня функция другую... Может не в контексте дело? |
componentDidMount() {
this.timerID = setInterval(
this.getData.bind(this),
3000
);
}
Ну и еще в es-next можно так писать:
class Json extends Component {
...
getData = () => {
...
}
componentDidMount() {
this.timerID = setInterval(
this.getData,
3000
);
}
}
А еще можно использовать оператор :: в es-next Ну и в реакте есть еще рабочая практика: функциям, которые будут вызываться в интервалах, или в хендлере события, контекст привязывают в конструкторе.
class Json extends Component {
constructor(props) {
super(props);
this.getData = this.getData.bind(this);
...
}
}
|
this.doAny = this.doAny.bind(this); любая нормальная программа должна читаться на естественном язые и в данном случае звучит так: "функция данного объекта это функция данного объекта в контексте объекта, которому она принадлжеит" :haha: выглядит ужасно, но работает :dance: спасибо |
| Часовой пояс GMT +3, время: 21:20. |