Назначение деструктуризации, по-видимому, влияет на переменную, которая возникает перед ней во время асинхронного вызова

#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 мог ссылаться только на внутреннюю.