反應this.SetState未定義-嵌套函數

Question

制作我的第一個React應用。 我想根據用戶的位置更新Google Maps API。 我收到錯誤“這是未定義的”。 我知道使用.bind（this）並包裝在箭頭函數中，但是我認為這種情況有些不同，因為我是在嵌套函數中設置狀態：

 constructor(props) { super(props); this.state = {zip: null, lat: 40.5304 , lng: -100.6534 , zoom: 3.8 }; this.updateCurrentPosition= this.updateCurrentPosition.bind(this); } //... updateCurrentPosition = () => { navigator.geolocation.getCurrentPosition(success, error); function success(pos) { this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`) } function error(err) { console.warn(`ERROR(${err.code}): ${err.message}`); }; } ops = () => { return { center: { lat: this.state.lat, lng: this.state.lng }, zoom: this.state.zoom } }; 

Answer 1

箭頭函數自動將函數綁定到父類。 如果未綁定函數或未綁定箭頭函數，則“ this”將僅引用函數本身，即使它是嵌套的。 您的成功函數（以及失敗函數）也未綁定到父類，因為您既沒有綁定它也沒有將其定義為箭頭函數。

Answer 2

問題是在Javascript的嚴格模式下this是未定義的。 您可以參考本段以了解更多信息http://2ality.com/2014/05/this.html

對於您的特定問題，當您定義success和error ，這兩個功能並不綁定到父項。

通過將功能定義為箭頭功能進行以下修改將解決您的問題。

const success = (pos) => {
    this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`)
}

const error = (err) => {
    console.warn(`ERROR(${err.code}): ${err.message}`);
}; 

Answer 3

因此，我改為直接將函數作為參數傳遞給getCurrentPosition方法，它似乎可以正常工作。

 updateCurrentPosition = () => { navigator.geolocation.getCurrentPosition( (pos) => { this.setState({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 1 }) }, (err) => { console.warn(`ERROR(${err.code}): ${err.message}`) } ) }