Reactjs 即使Reducer返回新对象，Reducer也不会渲染组件

在React原生组件中使用Redux，我还是个新手。我正面临着一个好几天都无法解决的问题。也就是说，我正在尝试获取我的导航数据，即纬度。我想做的是将其附加到redux状态，并每2秒获取其值。所以在我的组件中，我使用setInterval，它每2秒运行一次redux流。在返回react组件的过程中，我希望每次都会重新检索此状态，但实际情况并非如此。我只得到一次。我在这里搁置了类似的问题，所有的问题都是没有从减速器返回新对象。但我想这不是我的情况。 提前谢谢你！ 这是我的密码：

我的组件电池：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, View, Text } from 'react-native';
import { Button } from './Button';
import {  
    appStoped, 
    setCoordinates, 
    updateGeolocationArray, 
     } from '../actions';

class GeoBattery extends Component {
    handleStart() {        
        const geolocationArray = [];
        let geolocationCounter = 0;

        this.geoLocationInterval = setInterval(() => {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;
                    console.log(latitude);
                    this.props.setCoordinates(latitude, longitude);
                }, 
              );
              geolocationArray.push({ id: geolocationCounter++, latitude: this.props.latitude, longitude: this.props.longitude });
              this.props.updateGeolocationArray(geolocationArray);
        }, 1000);
    }

    handleStop() {
        clearInterval(this.geoLocationInterval);
    }

    handleNewLatitudeItems() {
        return this.props.geolocationArrayToMap.map(item => {
            return <Text key={item.id}> {item.latitude} </Text>;
        });
    }

    render() {
        console.log(this.props.latitude); // here it does not rerender
    const { buttonStyle, resultsStyle, resultContainer } = styles;
            return (
            <ScrollView style={buttonStyle}>
                <Button onPress={() => this.handleStart()}>START</Button>
                <Button onPress={() => this.handleStop()}>STOP</Button>
                <View style={resultContainer}>
                    <View style={{ flex: 4 }}>
                        <Text style={resultsStyle}> Lat: </Text>
                        <Text style={{ fontSize: 12 }}> { this.handleNewLatitudeItems() } </Text>
                    </View>
                </View>
            </ScrollView>
        );
    }
}

const styles = {
    buttonStyle: {
        marginTop: 20,
        marginBottom: 20,
    },
    resultContainer: {
        display: 'flex',
        flexDirection: 'row',
    },
    resultsStyle: {
        flex: 3,
        fontSize: 15,
        marginTop: 10,
        textAlign: 'center'
    }
  };

  const mapStateToProps = state => {
      console.log(state.update.geolocationArrayToMap); //here it return what I need to map and dynamically create new list items of latitude
    return {
        latitude: state.coords.latitude,
        geolocationArrayToMap: state.update.geolocationArrayToMap,
    };
};

export default connect(mapStateToProps, { appStoped, setCoordinates, updateGeolocationArray })(GeoBattery);

类型：

export const CLEAR_DATA = 'clear_data';
export const SET_COORDS = 'set_coords';
export const UPDATE_GEOLOCATION_ARRAY = 'update_geolocation_array';

我的索引减速机：

import { combineReducers } from 'redux';
import CoordsReducer from './CoordsReducer';
import UpdateReducer from './UpdateReducer';


export default combineReducers({
    coords: CoordsReducer,
    update: UpdateReducer,    
});

我的同事：

import { SET_COORDS, CLEAR_DATA } from '../actions/types';

const INITIAL_STATE = {
    latitude: '',
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SET_COORDS:
            return { ...state, latitude: action.payload1 };
        case CLEAR_DATA:
            return { ...state, ...INITIAL_STATE };
        default:
            return state;
    }
};

我的UPDATEREDUCER：

import { UPDATE_GEOLOCATION_ARRAY, CLEAR_DATA } from '../actions/types';

const INITIAL_STATE = {
    geolocationArrayToMap: [],
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case UPDATE_GEOLOCATION_ARRAY:
            return { ...state, geolocationArrayToMap: action.payload };
        case CLEAR_DATA:
            return { ...state, ...INITIAL_STATE };
        default:
            return state;
    }
};

MYSTORE：

import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';


const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

export default store;

---

您正在更改发送给操作的数组：

geolocationArray.push({ id: geolocationCounter++, latitude: this.props.latitude, longitude: this.props.longitude });
this.props.updateGeolocationArray(geolocationArray);

尝试使用不可变的方法来执行此操作：

this.props.updateGeolocationArray([...geolocationArray, { id: geolocationCounter++, latitude: this.props.latitude, longitude: this.props.longitude }]);

---

您正在更改发送给操作的数组：

geolocationArray.push({ id: geolocationCounter++, latitude: this.props.latitude, longitude: this.props.longitude });
this.props.updateGeolocationArray(geolocationArray);

尝试使用不可变的方法来执行此操作：

this.props.updateGeolocationArray([...geolocationArray, { id: geolocationCounter++, latitude: this.props.latitude, longitude: this.props.longitude }]);

---

navigator.geolocation.getCurrentPosition

中的回调需要多长时间才能被触发？换句话说，每次得到你的当前位置需要不到1秒的时间吗？好吧，我想这几乎不需要什么，因为我使用的模拟器带有模拟值，所以它不需要连接到外部。即使我将setInterval更改为10秒，也会导致相同的问题：我只获得一次值，而不是setInterval激发的次数。您的coords reducer是否被设置为具有“1”：

操作。payload1

在

navigator.geolocation.getCurrentPosition

中进行回调需要多长时间才能被激发？换句话说，每次得到你的当前位置需要不到1秒的时间吗？好吧，我想这几乎不需要什么，因为我使用的模拟器带有模拟值，所以它不需要连接到外部。即使我将setInterval更改为10秒，也会导致相同的问题：我只获得一次值，而不是setInterval激发的次数。您的coords reducer是否被设置为具有“1”：

操作。payload1

Bravo！你是对的！谢谢你。我认为我发送的东西可以变异，只有还原剂不能。你能解释一下为什么会这样吗？太好了！你是对的！谢谢你。我认为我发送的东西可以变异，只有还原剂不能。你能解释一下为什么会这样吗？