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

Question

[Алексей Беспалов]

Приветствую!
У меня теряется this в событии componentDidMount. Всю голову сломал. Я думал, что я понимаю в контексете вызова, но видать нет. Уже просто копирую примеры из интернета, там это рабочие варианты. Все равно this нет.
Подскажите пожалуйста, может я просто туплю?

componentDidMount = () => {
     const myHeaders = new Headers({
      "Content-Type": "application/json",
      Accept: "application/json"
    })

    fetch("http://localhost:3000/bookmarks.json", {
      headers: myHeaders,

    })
      .then(response => {
        console.log(response);
        return response.json();
      })
      .then(data => {
        console.log(data);
        this.setState({ data });
      })

  }

Comments

[Роман Александрович]

покажите весь компонент

[Антон Спирин]

Все равно this нет.

Где нет?

1. В представленном коде this не теряется.
2. Нет смысла описывать componentDidMount свойством класса.

[Алексей Беспалов]

Роман Александрович, пожалуйста.

import React, { Component } from 'react';
import './App.css';

import BkContener from './components/BkContener';

class App extends Component {
    state = {
        bookmarks: null
    }
    componentDidMount = () => {
        const myHeaders = new Headers({
            "Content-Type": "application/json",
            Accept: "application/json"
        })

        fetch("http://localhost:3000/bookmarks.json", {
            headers: myHeaders,

        })
            .then(response => {
                console.log(response);
                return response.json();
            })
            .then(data => {
                console.log(data);
                this.setState({ data });
            })

    }

    render() {
        const bookmarks = this.state.bookmarks
        console.log(bookmarks)

        if (!bookmarks) return ('Is Empty');

        const Contener = bookmarks.map((currentBk) => {
            return (
                <BkContener
                    key={currentBk.id}
                    bkFolder={currentBk.children}
                    title={currentBk.title}
                >
                </BkContener>)
        })

        return (
            { Contener }
        );
    }
}

export default App;

[Роман Александрович]

Алексей Беспалов, попробуйте так

constructor(){
  super()
  this.state = {
        bookmarks: null
    }
}

[Алексей Беспалов]

Антон Спирин, теряется, чер возми.

2. Нет смысла описывать componentDidMount свойством класса.

Тут я не понял, как его можно вынести за класс, он же к this.state обращается?

[Алексей Беспалов]

Роман Александрович, не помогло

[Антон Спирин]

Алексей Беспалов,

Тут я не понял, как его можно вынести за класс, он же к this.state обращается?

componentDidMoun() {} // Метод класса
comonentDidMoun = () => {} // Свойство класса

При обращении appInstatnce.componentDidMount(), в случае с методом, контекст не теряется.

У вас ошибка в коде, замените:

return (
  { Contener }
);

на:
return Contener;
И исправьте ошибку в слове 'Container', глаза режет. А еще лучше уберите лишнюю переменную и оберните список в div или React.Fragment

return (
  <div>
    {bookmarks.map((currentBk) => (
      <BkContainer
        key={currentBk.id}
        bkFolder={currentBk.children}
        title={currentBk.title}
       />        
     )}
  </div>
);

Проблем с this.setState у вас быть не должно.
И изучайте официальную документацию.

[Алексей Беспалов]

Антон Спирин, действительно это хром не показывал this при отладке.
Спасибо, и за пример возврата тоже.

[Егор Живагин]

+ , это ошибка в дебаггере, которая иногда отнимает много времени

Answer 1

[Дима]

Тут хороший ответ на вопрос почему теряется this: https://stackoverflow.com/questions/24785238/this-...

Чтобы заработало, нужно сохранить контекст старым способом: var self = this
и потом при вызове setState обращаться к self

Рабочий код выглядит так:

componentDidMount() {
        const myHeaders = new Headers({
            "Content-Type": "application/json",
            Accept: "application/json"
        })

        var self = this

        fetch("https://jsonplaceholder.typicode.com/todos/1", { // ваш URL
            headers: myHeaders,
        }).then(response => {
            return response.json();
        }).then(data => {
            self.setState({ data });
        })
    }