如何在反应状态下存储回调函数的值？ （谷歌地图）

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
    });
};