Почему теряется this?

Question

[nuclear_kote]

export default class App extends React.Component {
        onRegionChange(region) {
		this.setState({region: region});
	}
        render() {
		return (
			<View >
				<MapView region={this.state.region} onRegionChange={this.onRegionChange} />
			</View>
		);
	}
}

Почему то this в onRegionChange не относится к классу App (undefined is not a function (evaluating 'this.setState...

Как с этим бороться?

Answer 1

[davidnum95]

Нужно биндить контекст.

constructor(props, context) {
    super(props, context);
    this.onRegionChange = this.onRegionChange .bind(this);
  }

Comments

[nuclear_kote]

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
       this.setState({region:position});
});

А в данном случае как быть?

[davidnum95]

nuclear_kote: в каком смысле?

[Максим]

nuclear_kote: не знаю всей картины... но вы всегда можете сохранить this в переменную, обычно пишут const selft = this, и потом внутри, например того же $.ajax success коллбэка можно вызывать self.setState

Answer 2

[Islam Ibakaev]

.setState() является методом объекта<App /> , а не глобального объекта window.
Соответсвенно, если упоминаешь this в теле функции, то метод нужно завязывать на контексте.

Comments

[nuclear_kote]

Это как?

[Islam Ibakaev]

вот так https://repl.it/G46S

Answer 3

[Максим]

С версии 0.14 при записи extends ... Component реакт больше не "автобиндит" this.
Если использовать React.createClass - будет. Но лучше просто bind'ить необходимое в constructor'e

Answer 4

[Андрей]

Используй стрелочные функции, их главная особенность то что в таких моментах this не теряется, они захватывают значение this окружающего контекста.