Question

我不断收到“未处理的拒绝（错误）：操作必须是普通对象。将自定义中间件用于异步操作。”

详细信息：我遵循this tutorial系列，但在Windows 10中针对Android开发。使用本机v0.57。我的问题是，当我从Home组件调用this.props.getCurrentLocation（）时，出现该错误。看来很多人都在做同一教程，这是一个问题，所以我已经读了很多，但是我无法直截了当地。

这是我的代码： src / routes / Home / modules / home.js

import update from "react-addons-update";
import constants from "./actionConstants";
import { Dimensions } from "react-native";

// -------------------------------
// CONSTANTS
// -------------------------------

const { GET_CURRENT_LOCATION } = constants; // keeps all the constants in one file
const { width, height } = Dimensions.get("window");
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = ASPECT_RATIO * LATITUDE_DELTA;

// -------------------------------
// ACTIONS
// -------------------------------

export function getCurrentLocation(){
  return (dispatch)=>{ 
    navigator.geolocation.getCurrentPosition(
      (position) => { 
        dispatch({
          type:GET_CURRENT_LOCATION,
          payload:position
        }); 
      },
      (error) => {
          console.warn("error::" . error.code);
          var msg = null;
          switch(error.code) {
            case error.PERMISSION_DENIED:
                // msg = "User denied the request for Geolocation.";
                msg = "Usuario denego la solicitud de Geolocalizacion.";
                break;
            case error.POSITION_UNAVAILABLE:
                msg = "Location information is unavailable.";
                break;
            case error.TIMEOUT:
                msg = "The request to get user location timed out.";
                break;
            case error.UNKNOWN_ERROR:
                msg = "An unknown error occurred.";
                break;
          }
          alert(msg);
      },
      { enableHighAccuracy: true, timeout: 8000, maximumAge: 10000 }
    );
  }
}



// -------------------------------
// ACTION HANDLERS
// -------------------------------

function handleGetCurrentLocation(state, action){
  return update(state, {
    region:{
      latitude:{
        $set:action.payload.coords.latitude
      },
      longitude:{
        $set:action.payload.coords.longitude
      },
      latitudeDelta:{
        $set:LATITUDE_DELTA
      },
      longitudeDelta:{
        $set:LONGITUDE_DELTA
      }
    }
  });
}


const ACTION_HANDLERS = {

  GET_CURRENT_LOCATION:handleGetCurrentLocation
};

const initialState = {
  region:{}
};

export function HomeReducer (state = {}, action) {
  const handler = ACTION_HANDLERS[action.type];
  return handler ? handler(state, action) : state;
};

src / routes / Home / modules / actionConstants.js

export default {
  GET_CURRENT_LOCATION: "GET_CURRENT_LOCATION"
};

src / routes / home / containers / HomeContainer.js

import { connect } from "react-redux";
import Home from "../components/Home";
import {
  getCurrentLocation
} from "../modules/home";

const mapStateToProps = (state) => ({
  region:state.home.region
});

const mapActionCreators = { 
  getCurrentLocation 
}; 

export default connect(mapStateToProps, mapActionCreators)(Home);

app / src / main / AndroidManifest.js

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.taxiapp">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

src / store / createStore.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import makeRootReducer from "./reducers";
import { createLogger } from "redux-logger";

const log = createLogger({ diff: true, collapsed: true });

// Export function that can create our store and autopersist the data

export default (initialState = {}) => {

  // Middleware configuration
  const middleware = {thunk, log}; 

  // Store enhancers
  const enhancers = [];

  // Store instantiation
  const store = createStore(
    makeRootReducer(),
    initialState,
    compose(
      applyMiddleware(...middleware),
      ...enhancers
    )
  );
  return store;
};

src / routes / home / components / Home.js

// Takes care of the state
import React from "react";
import { View, Text } from "react-native";

import {Container} from "native-base";
import MapContainer from "./MapContainer";

class Home extends React.Component {

  componentDidMount() {

    this.props.getCurrentLocation();

  }
  render(){

    return(
      <Container>
        {   this.props.region.latitude && 
          <MapContainer region={ this.props.region}/>
        } 
      </Container>
    );

  }
}

export default Home;

Answer 1

错误似乎出在商店实例中。

// Store instantiation
  const store = createStore(
    makeRootReducer(),
    initialState,
    compose(
      // applyMiddleware(...middleware), => works after commenting this line
      applyMiddleware(thunk),
      ...enhancers
    )
  );

动作必须是普通对象。使用自定义中间件进行异步操作/未定义不是对象/使用navigator.geolocation出错

1 个答案: