如何在反應狀態下存儲回調函數的值？ （谷歌地圖）

Question

我試圖將回調函數中的值存儲在 React 的狀態中，但一直有錯誤。

我正在使用 @react-google-maps/api 並希望將 geoJson 存儲在 state 中，因此在我的代碼中，我試圖訪問 'obj' 並使其在回調之外可用。

這是我的代碼...

getGeoJson = (map, maps) => {

    //toGeoJson() takes a callback
    map.data.toGeoJson(function(obj){
        return obj
    });

    //Trying to store in state like this...
    this.setState({
        value: obj
    });
};

參考.toGeoJson()

Answer 1

您需要在回調中設置value 。 在這里，箭頭函數很重要，因為您可以在不綁定的情況下保留上下文。

getGeoJson = (map, maps) => {
    map.data.toGeoJson((obj) => {
        this.setState({
            value: obj
        });
    });
};

Answer 2

變量 obj 是函數作用域，您試圖在回調函數之外設置它的值，這就是該值可能被設置為 undefined 或 null 或這些行中的某些內容的原因。

您需要將 obj 變量存儲到回調函數內的 state 中。 像這樣：

 getGeoJson = (map, maps) => {
    //toGeoJson() takes a callback
    map.data.toGeoJson(obj => {
        return obj
    this.setState({
        value: obj
    });
    });
};

但是，出於某種原因，如果您不想在回調函數中設置它的值，則可以從回調函數中返回 obj 的值，但您還需要將返回值捕獲到另一個變量中，然后才能將其存儲在狀態，像這樣：

 getGeoJson = (map, maps) => {
//toGeoJson() takes a callback
   const object = map.data.toGeoJson(function(obj){
        return obj
    });

   this.setState({
        value: object
    });
};