Reactjs Redux thunk不会使用异步函数的响应进行更新

我一直在遵循安装redux thunk的指南，以便获取用户的地理位置，然后发送和更新状态。但是，每次我尝试使用响应数据分派操作时，它只是将数据设置为null

当我尝试模拟一个带超时的API调用并设置一些随机值时，它可以正常工作

geoLocationActions.js

export function geoLocationActions() {
   return dispatch => {
    const geolocation = navigator.geolocation;
    geolocation.getCurrentPosition((position) => {
        console.log(position.coords);
        dispatch({
            type: 'FETCH_USER_LOCATION_SUCCESS',
            payload: position
        });
    });
  } 
};

MapContainer.js

import React from "react";
import { geoLocationActions } from '../../../actions/geoLocationActions';
import { connect } from 'react-redux';

class MapContainer extends React.Component {

    componentWillMount() {
        this.props.geoLocationActions();
    }

    render() {
        return (
            <div>
                <p>Fetching location...</p>
            </div>
        );
    }
}

// update current geolocation state
const mapDispatchToProps = (dispatch) => {
    return {
        geoLocationActions: () => dispatch(geoLocationActions())
    };
}

const mapStateToProps = (state) => {
    return {
        state: state
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(MapContainer);

store.js

import { createStore, combineReducers, applyMiddleware, compose } from 

'redux';
import reducer from '../reducers/reducers';
import reduxThunk from "redux-thunk";

const rootReducer = combineReducers({
    state: reducer
});

export const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(reduxThunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

---

它将变成HTML5地理位置对象。您需要将其转换为可以用JSON.stringify序列化的常规对象。 您可以使用以下方法：

const geopositionToObject = geoposition => ({
  timestamp: geoposition.timestamp,
  coords: {
    accuracy: geoposition.coords.accuracy,
    latitude: geoposition.coords.latitude,
    longitude: geoposition.coords.longitude
  }
})

更新您的geoLocationActions.js，如下所示：

export function geoLocationActions() {
   return dispatch => {
    const geolocation = navigator.geolocation;
    geolocation.getCurrentPosition((position) => {
        const positionObj = geopositionToObject(position)
        console.log(positionObj);
        dispatch({
            type: 'FETCH_USER_LOCATION_SUCCESS',
            payload: positionObj
        });
    });
  } 
};

---

您可以查看相同的代码。

它将变成HTML5地理位置对象。您需要将其转换为可以用JSON.stringify序列化的常规对象。 您可以使用以下方法：

const geopositionToObject = geoposition => ({
  timestamp: geoposition.timestamp,
  coords: {
    accuracy: geoposition.coords.accuracy,
    latitude: geoposition.coords.latitude,
    longitude: geoposition.coords.longitude
  }
})

更新您的geoLocationActions.js，如下所示：

export function geoLocationActions() {
   return dispatch => {
    const geolocation = navigator.geolocation;
    geolocation.getCurrentPosition((position) => {
        const positionObj = geopositionToObject(position)
        console.log(positionObj);
        dispatch({
            type: 'FETCH_USER_LOCATION_SUCCESS',
            payload: positionObj
        });
    });
  } 
};

---

您可以查看以查看相同的代码。

您是否看到

console.log（position.coords）在您的控制台中？是！确实如此，这就是为什么我觉得这很奇怪的原因。在减速机中抛出一个
console.log（）
。这叫什么？接下来，在渲染函数中添加
console.log（this.props）
，是否调用了该函数？是否看到
console.log（position.coords）在您的控制台中？是！确实如此，这就是为什么我觉得这很奇怪的原因。在减速机中抛出一个
console.log（）
。这叫什么？接下来，在渲染函数中添加一个
console.log（this.props）
，是否调用该函数？