Почему setState использует предыдущий объект после функции? - PullRequest
0 голосов
/ 01 ноября 2018

Я делаю некоторое форматирование для объекта, выбирая строки всякий раз, когда в моем ключе объекта есть URL. Когда я иду к установке состояния в конце выборки, отображаемый компонент использует предварительно отформатированный объект.

Объект корректно отображается в console.log о реквизитах, данных компоненту, а также если консоль регистрируется в конце функции.

Почему SetState использует исходный объект вместо результата обещания?

_clicked(index) {

let clickedHouse = this.state.houses.find(obj => obj.url === index);
delete clickedHouse[`url`];
this._getNames(clickedHouse).then(res => 
  // console.log(`completedFetching`,res)
  this.setState({displayedHouse: res})
  )  
 }

_getNames(houseObj) {
  return new Promise((resolve, reject) => {
  let namedHouse = houseObj;
  Object.keys(namedHouse).forEach(key => {
    if (namedHouse[key].includes(`https`)) {
      console.log(`fetching something`)
      this._loadJson(namedHouse[key])
      .then(result => (namedHouse[key] = result.name));
    }
   });
   resolve(namedHouse)
   })
 }

Цель состоит в том, чтобы отобразить: https://anapioficeandfire.com/api/houses/10 с именами вместо URL.

1 Ответ

0 голосов
/ 01 ноября 2018

Функции стрелки ES6 не имеют своих собственных this (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

Внутри функции стрелки this представляет тот же объект, что и снаружи. Таким образом, this.setState вызывается для того же объекта, что и this._getNames.

...