Question

我仍然有点在React Native组件中使用Redux。我现在遇到了一个我无法解决的问题。也就是说，我试图获取导航数据，即。纬度。我想要做的是将它附加到redux状态并每2秒获取一次值。因此，在我的组件内部，我使用setInterval，每2秒运行一次我的redux流量。在返回反应组件的路上，我希望每次都能重新呈现这个状态，但这不是正在发生的事情。我只得到一次。我在这里解决了类似的问题，所有问题都没有从reducer返回新对象。但我想这不是我的情况。先感谢您！这是我的代码：

MY COMPONENT GEOBATTERY：

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);

我的行动：

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

export const appStoped = () => {
    return {
        type: CLEAR_DATA
    };
};

 export const setCoordinates = (latitude, longitude) => {
     return {
         type: SET_COORDS,
         payload1: latitude,
         payload2: longitude
     };
 };

 export const updateGeolocationArray = (geolocationArray) => {
     return {
         type: UPDATE_GEOLOCATION_ARRAY,
         payload: geolocationArray
     };
 };

类型：

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

MY INDEX REDUCER：

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


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

我的COORDSREDUCER：

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;
    }
};

MY 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;

Answer 1

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

//------- get contents of url file -------//

        $html = file_get_contents($link);

        // loading DOM document //
        $doc = new DOMDocument();
        @$doc->loadHTML($html);

        // loading language & country tags
        $tags = $doc->getElementsByTagName('html');
        foreach ($tags as $tag) 
        {
            // getting lang and country property
            $lang_country = $tag->getAttribute('lang');

            $lang = array_shift(explode('-', $lang_country));

            if (strpos($lang_country, '-') !== false){

                $country = substr($lang_country, strpos($lang_country, '-') + 1);
                $country = strtoupper($country);

            }   
        };

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

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

即使reducer返回新对象，Reducer也不会渲染Component

1 个答案: