Question

我正在使用Expo React Native在Redux和React-Redux的帮助下开发移动应用程序。使用React-Redux v6.0，我可以毫无问题地连接组件，但是我无法使用v6.0从存储中获取状态，尽管使用Logger Middleware，我的状态已经更新。将其与mapStateToProps提取后无法使用。因此，我决定将React-Redux更新到v7.0，希望能够解决问题，但是我遇到了一个新问题（下图）。

Issue Screen

这是我的App.js

import React from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import store from './src/redux/configureStore';
import LocationShow from './src/components/LocationShow';

export default class App extends React.Component {
   render() {
    return (
     <Provider store={store}>
       <View style={styles.container}>
         <LocationShow />
       </View>
     </Provider>
    );
   }
  }

const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 alignItems: 'center',
 justifyContent: 'center',
 },
});

这是我的LocationShow.js

import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import {Location, Permissions, Constants} from 'expo';
import {connect} from 'react-redux';
import {Platform} from 'expo-core';
import * as locationActions from '../redux/actions/locationActions';

class LocationShow extends React.Component {
  componentDidMount = async () =>{
    if (Platform.OS === 'android' && !Constants.isDevice){
        console.log('Switch to the real device dawg!')
    }else{
        await this.props.getCurrentLocation();
    }    
  }

render(){
    return(
        <View>
        {this.props.isLoading ?
            <ActivityIndicator/>:
            <View>
                <Text>Latitude:{this.props.latitude}</Text>
                <Text>Longitude:{this.props.longitude}</Text>
            </View>
        } 
        </View>      
    )
   } 
}   

const mapStateToProps = (state) =>{
    return{
        latitude: state.latitude,
        longitude: state.longitude,
        error: state.error,
        isLoading: state.isLoading
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        getCurrentLocation: () => 
dispatch(locationActions.getCurrentLocation())
    }
}

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

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
}
});

我通过connect（）读取了v7.0的更改，但是我对React还是很陌生，所以我不了解它。

注意：connect现在内部使用React.memo（），它返回一个特殊的对象而不是一个函数。从React 16.6发行以来，任何假定React组件仅是函数的代码都是错误的。如果使用PropTypes检查有效的组件类型，则应从PropTypes.func更改为PropTypes.elementType。

我正在运行React：v16.8.6，React-Native：0.57.1，React-Redux：v7.0.2，Redux：v4.0.1

希望有人可以帮助我，如果代码太糟糕，对不起，就像我上面所说的，我对React Native和Redux或其他东西还很陌生。谢谢！

Answer 1

考虑之后，我决定回到react-redux的6.0.1版本。现在一切都像冠军。该线程可以立即关闭。顺便说一下，问题恰好来自于新的connect（），导致react-redux团队使用React.memo（）和Hooks。但是我仍然不明白为什么会出现问题，因此，如果有人对新的connect（）对7.0.2版的更改有所了解，请随时进行解释。谢谢你们！

使用React-Redux连接组件

1 个答案: