#reactjs #asynchronous
Вопрос:
У меня есть следующий обработчик событий внутри компонента класса React.
eventHandler = async location => {
console.log("Location is:", location) // location is displayed as expected
this.setState({}, async () => {
console.log('Location is', location); // location is undefined
const {location, weather, temperature } = {'location':'Laos'};
console.log('location is', location); // location is displayed as expected (Laos)
});
};
Я замечаю, что местоположение становится неопределенным из-за назначения деструкции в следующей строке. Переназначение переменной на «место» в деструктурировании таким образом const {location:place, weather, temperature } = {}
устраняет проблему.
Я хотел бы понять, почему оператор деструктурирования вообще влияет на эту переменную в коде, который появляется до того, как происходит деструктурирование.
Комментарии:
1.Из-за подъема. Это не «становится»
undefined
— вы затеняетеlocation
параметр, объявляя новыйlocation
вsetState
обратном вызове. Этоundefined
до того, как вы… определите это.2. Я удивлен, что вы не получаете сообщение об ошибке «не удается получить доступ к «местоположению» до инициализации». Я предполагаю, что это переводится в
var
» s «вместоconst
» s».3. @NicholasTower Или ошибка ссылки, чего я и ожидал (временная мертвая зона)
Ответ №1:
У вас есть две переменные с именами location
. Поскольку const
s ограничены областью действия блока, в котором они находятся, любой код в этой внутренней функции будет взаимодействовать с внутренней переменной, а не с внешней. В результате вы пытаетесь получить доступ к внутренней переменной до того, как присвоите ей значение.
Я бы ожидал, что код действительно выдаст ошибку ссылки, сказав, что вы «не можете получить доступ к «местоположению» до инициализации». Тот факт, что это не может быть объяснено, если этот код переносится и, следовательно, использует var
s вместо consts
. С vars у вас все еще та же проблема, что внутренний код обращается только к внутренней переменной, но он не создает исключения, а просто дает вам неопределенность.
Когда вы переименовываете переменную, конфликта больше нет. location
мог ссылаться только на внешнюю переменную и place
мог ссылаться только на внутреннюю.