javascript - react native 错误 : Possible Unhandled Promise Rejection - Cannot read property data

Question

我遇到了一个奇怪的问题，我无法用我的 React Native 应用程序准确定位。我正在使用 Lodash 循环通过 API 响应，以在清除数组后使用返回的响应来设置位置数组的状态。当我在循环中仅显示响应的值/键时，它工作正常，但是当我尝试使用 setState 时，我可能会遇到未处理的 promise 错误。

这是循环和设置状态的代码:

    updateMarkers(payload) {
        this.setState({
            markers: []
        })
        let id = 0
        _.forOwn(payload, function(value, key) {
            this.setState({
                markers: [
                    ...this.state.markers,
                    {
                        coordinate: key.coordinates,
                        key: id++
                    }
                ]
            })
        })
        console.log(this.state.markers)
    }

这是我收到的回复:

Possible Unhandled Promise Rejection (id: 0):
Cannot read property 'data' of undefined
TypeError: Cannot read property 'data' of undefined
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:113197:55
    at tryCallOne (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25822:8)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25908:9
    at JSTimersExecution.callbacks.(anonymous function) (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8801:13)
    at Object.callTimer (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8581:1)
    at Object.callImmediatesPass (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8680:19)
    at Object.callImmediates (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8695:25)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7405:43
    at guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7283:1)
    at MessageQueue.__callImmediates (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7405:1)

这是当我控制台记录值和键(不设置状态)时返回的对象的样子。它正确地循环遍历每个对象。

Object {coordinates: Object, description: "Machine F", distance: 1.220632249131323, inventory: Array[16], pid: "-KP6ulcT9qeDb1oFFrVA"}
coordinates:Object
description:"Machine F"
distance:1.220632249131323
inventory:Array[16]
pid:"-KP6ulcT9qeDb1oFFrVA"
__proto__:Object

如有任何帮助，我们将不胜感激!

Answer 1

“_.forOwn”第二个参数中的 this 引用没有指向您的 React 类。 Javascript 函数不保留周围上下文的 this。你应该使用 ES6 箭头函数来保持这个上下文。此外，您的调用 this.setState({markers: []}) 也会导致问题。

_.forOwn(payload,(value, key) => {
            this.setState({
                markers: [
                    ...this.state.markers,
                    {
                        coordinate: key.coordinates,
                        key: id++
                    }
                ]
            })
        })

此外，this.setState 调用不是同步的，因此在您的 _.forOwn 回调中，无法保证 this.state.markers 可用。您应该重构您的代码，以便在您的 _.forOwn 调用之后仅使用新标记数组进行 setState 调用。

var markers =[]
        let id = 0
        _.forOwn(payload, function(value, key) {
            markers.push({
                        coordinate: key.coordinates,
                        key: id++
                    });
        });
this.setState({markers},()=>{console.log(this.state.markers)});