Javascript 异步操作未及时向Redux存储添加数据，导致错误：无法读取属性'；地图'；未定义的

我对Redux中的异步操作有问题

错误：

无法读取未定义映射的属性“map”：71

问题在于，MapContainer组件尝试装载时，aysnc

设备的响应尚未添加到Redux存储中。所以
这个.props.device
是未定义的，我不能在上面调用map。但是我需要做一些这样的事情来获取MapContainer组件中的数据

我最初尝试解决这个问题是将
this.props.dispatch（setDevice（））
从MapContainer组件的
componentWillMount（）
移动到父应用程序组件的
componentWillMount（）

基本上，我需要找到一种方法来获取
this.props.device
，以便在安装MapContainer组件时，或者至少在尝试解析
this.props.device.sessions.map
时，在MapContainer组件的
render（）
方法中插入正确的数据

任何指示都将不胜感激。这就是人们使用RxJS observable来解决的问题吗？有没有一种简单的方法可以在不添加新工具的情况下修复此问题

组件/Map.js：

            <LayersControl position='topright'>
                {console.log('#########this.props', this.props)}
                {
                    this.props.device.sessions.map((session, i) => {
                        return (
                            <Overlay name={String(i + 1)} key={i}>
                                <Polyline color='red' positions={session.waypoints} />
                            </Overlay>
                        )
                    })
                }
            </LayersControl>

actions/device.js：

export function setDevice(data) {
    console.log('in setDevice action')
    return {
        type: 'SET_DEVICE',
        payload: fetch('/click')
            .then(resp => resp.json())
            .then(data => {
                console.log('in second then of fetch')
                return data
            })
            .catch(err => console.error(err))
    }
}

export default function reducer(state = {
    device: ''
}, action) {
    switch (action.type){
        case 'SET_DEVICE':
            console.log('in reducer SET_DEVICE case')
            return {...state, data: action.payload, device: action.payload[0] }
        default:
            console.log('in reducer DEFAULT case')
            return state
    }
}

reducers/device.js：

export function setDevice(data) {
    console.log('in setDevice action')
    return {
        type: 'SET_DEVICE',
        payload: fetch('/click')
            .then(resp => resp.json())
            .then(data => {
                console.log('in second then of fetch')
                return data
            })
            .catch(err => console.error(err))
    }
}

export default function reducer(state = {
    device: ''
}, action) {
    switch (action.type){
        case 'SET_DEVICE':
            console.log('in reducer SET_DEVICE case')
            return {...state, data: action.payload, device: action.payload[0] }
        default:
            console.log('in reducer DEFAULT case')
            return state
    }
}

您可以添加一个条件来检查
此.props.device.session
是否未定义

<LayersControl position='topright'>
                {console.log('#########this.props', this.props)}
                {
                    this.props.device.sessions && this.props.device.sessions.map((session, i) => {
                        return (
                            <Overlay name={String(i + 1)} key={i}>
                                <Polyline color='red' positions={session.waypoints} />
                            </Overlay>
                        )
                    })
                }
            </LayersControl>


{console.log（'.'.'.'.'.'.'.'.'这个.道具'，这个.道具）}
{
this.props.device.sessions&&this.props.device.sessions.map（（会话，i）=>{
返回(
)
})
}

或者，您可以将
数据.sessions
初始化为空数组，并在异步操作返回数据时覆盖它。
如果您使用的是异步数据，您的组件应该能够使用空/空/无数据进行渲染