Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.12.2018, 18:44
Новичок на форуме
Отправить личное сообщение для Leonid_ts Посмотреть профиль Найти все сообщения от Leonid_ts
 
Регистрация: 27.08.2018
Сообщений: 6

React. Проблема с передачей event-объекта при обновлении стейта в input'e
Изучаю реакт неделю и столкнулся со следующей проблемой (ссылка на CodePen).

Есть два инпута - имейл и пароль. В них есть один обработчик осбытия onChange. В нем при каждом изменении value происходит обновление стейта компонента. И проблема заключается в том, что если обновлять стейт через функцию
handleChange = (e) => {
    this.setState(state => ({
      ...state,
      [e.target.type]: e.target.value,
    }));
 }

то, почему-то появляется ошибка "Cannot read property 'type' of null". Т.е. объект события передается с пустыми свойствами.

Однакому если деструктуризовать объект события, то всё работает
const { target } = { ...e };

this.setState(state => ({
  ...state,
  [target.type]: target.value,
}));


или так

const { target } = { ...e };
const { type } = target;
const { value } = target;

this.setState(state => ({
  ...state,
  [type]: value,
}));


Если менять стейт не в функциональном стиле, то объект события имеет правильные свойства
this.setState({
    ...this.state,
    [e.target.type]: e.target.value,
});


Вопрос: почему без структуризации, функция которая обновляет стейт получает объект события с пустыми полями. Деструтурированный объект traget (и его деструктурированные свойства) и объект e находятся же в одной области видимости. Что я упускаю?

Если можете распишите, пожалуйста, максимально подробно. Я только учусь и могу не знать очевидные для опытных программитов вещей.
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2018, 09:52
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

Хороший вопрос %)

http://www.ecma-international.org/ec...ics-evaluation

An ArrowFunction does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment...
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2018, 14:59
Новичок на форуме
Отправить личное сообщение для Leonid_ts Посмотреть профиль Найти все сообщения от Leonid_ts
 
Регистрация: 27.08.2018
Сообщений: 6

SuperZen,
За ссылку, спасибо, но всё равно не понимаю. То ли не хватает понимания английского, то ли просто не понимаю того, как это объясняется в источнике. Что значит "Стрелочная функция не определяет локальной привязки для arguments(иммется ввиду список агрментов, не объект же arguments?), super, this, or new.target.". Как это не определяет, если тут
let f = (outerArg) => {
    let fInner = (innerArg) => {
        console.log(outerArg);
        console.log(innerArg);
    }
    fInner('inner arrowFunc argument');
}
f('outer arrowFunc argument');

чудесно выведется в консоль и outerArg и innerArg;

Последний раз редактировалось Leonid_ts, 16.12.2018 в 16:40.
Ответить с цитированием
  #4 (permalink)  
Старый 17.12.2018, 10:23
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

хз что там внутри, делает реакт, может быть копию ) ф-ции... если только в IIFE завернуть
class App extends Component {

  state = {
    one: 1
  }

  onChange = (e) => {
    this.setState(((state) => {
      return ({ [e.target.name]: e.target.value })
    })(), () => console.log(this.state))
  }

  render() {
    return (
      <div className="App">
        <input type="text" name="one" value={this.state.one} onChange={this.onChange} />
      </div>
    );
  }
}


setState внутри...
setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;
Ответить с цитированием
  #5 (permalink)  
Старый 18.12.2018, 19:04
Новичок на форуме
Отправить личное сообщение для Leonid_ts Посмотреть профиль Найти все сообщения от Leonid_ts
 
Регистрация: 27.08.2018
Сообщений: 6

SuperZen,
нашел ответ, но всё равно не понимаю, как мы можем получить доступ к "правильным" свойствам объекта, после того, как они были обnullены.
Ответить с цитированием
  #6 (permalink)  
Старый 18.12.2018, 20:50
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

как видим, что если вызвать ф-цию внутри this.setState, что она не имеет доступ к аргументам вызывающей ф-ции, тут либо надо согласиться с условиями, где она была вызвана, либо долго думать ) почему не так, есть варик, что происходит переопределение методов объекта, а как на самом деле, очень надо долго погружаться в обстоятельства, когда это было написано...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
React Router - re-render компонента при смене url smegol Библиотеки/Тулкиты/Фреймворки 9 29.09.2018 23:58
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 16:15
Теряется event при перемещении объекта (Drag&Drop) seagor Events/DOM/Window 16 25.07.2007 01:28