React native 使用本机React错误类型Redux错误：undefined不是对象（计算'；"this.props.counter'；）

我正在尝试将redux与react native一起使用，在您的tube视频中遵循了这个示例

这是一个非常简单的计数器应用程序，编码最少

它不断地给我这个错误，我已经尝试了很多次，但无法找出是什么一直抛出这个错误

“错误类型错误：未定义不是对象（正在评估 “_this.props.counter”）此错误位于：在CounterApp中 （由ConnectFunction创建）

下面是我的app.js代码

import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import CounterApp from './src/CounterApp'

import {createStore} from 'redux'
import {Provider} from 'react-redux'

const initialState = {
  counter: 0
}

const reducer = (state = initialState, action) => {
  switch(action.type)
  {
    case 'INCREASE_COUNTER':
      return {counter: state.counter+1}
    case 'DECREASE_COUNTER': 
      return {counter: state.counter-1}
  }
  return state 
}

const store = createStore(reducer)

export default function App() {
  return (
    <Provider store={store}>
      <CounterApp/>
    </Provider>
  );
}

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

import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {connect} from 'react-redux'

const CounterApp = () => {
  return (
    <View style={styles.container}>
      <View style={{flexDirection: 'row', width: 200, justifyContent: 'space-around'}}>
        <TouchableOpacity onPress={()=>this.props.increaseCounter()}>
          <Text>Increase</Text>
        </TouchableOpacity>
        <Text>{this.props.counter}</Text>
        <TouchableOpacity onPress={()=>this.props.decreaseCounter()}>
          <Text>Decrease</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

function mapStateToProps(state){
    return{
        counter: state.counter
    }
}

function mapDispatchToProps(dispatch){
    return{
        increaseCounter : () => dispatch({type: 'INCREASE_COUNTER'}),
        decreaseCounter : () => dispatch({type: 'DECREASE_COUNTER'})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CounterApp)

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

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、TouchableOpacity}；
从“./src/CounterApp”导入CounterApp
从“redux”导入{createStore}
从“react redux”导入{Provider}
常量初始状态={
柜台:0
}
const reducer=（state=initialState，action）=>{
开关（动作类型）
{
“增加计数器”案例：
返回{counter:state.counter+1}
“减少计数器”案例：
返回{counter:state.counter-1}
}
返回状态
}
const store=createStore（reducer）
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

下面是我的CounterApp.js代码

import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import CounterApp from './src/CounterApp'

import {createStore} from 'redux'
import {Provider} from 'react-redux'

const initialState = {
  counter: 0
}

const reducer = (state = initialState, action) => {
  switch(action.type)
  {
    case 'INCREASE_COUNTER':
      return {counter: state.counter+1}
    case 'DECREASE_COUNTER': 
      return {counter: state.counter-1}
  }
  return state 
}

const store = createStore(reducer)

export default function App() {
  return (
    <Provider store={store}>
      <CounterApp/>
    </Provider>
  );
}

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

import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {connect} from 'react-redux'

const CounterApp = () => {
  return (
    <View style={styles.container}>
      <View style={{flexDirection: 'row', width: 200, justifyContent: 'space-around'}}>
        <TouchableOpacity onPress={()=>this.props.increaseCounter()}>
          <Text>Increase</Text>
        </TouchableOpacity>
        <Text>{this.props.counter}</Text>
        <TouchableOpacity onPress={()=>this.props.decreaseCounter()}>
          <Text>Decrease</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

function mapStateToProps(state){
    return{
        counter: state.counter
    }
}

function mapDispatchToProps(dispatch){
    return{
        increaseCounter : () => dispatch({type: 'INCREASE_COUNTER'}),
        decreaseCounter : () => dispatch({type: 'DECREASE_COUNTER'})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CounterApp)

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

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、TouchableOpacity}；
从“react redux”导入{connect}
常量计数器应用=（）=>{
返回(
this.props.increaseCounter（）}>
增加
{this.props.counter}
this.props.decreaseCounter（）}>
减少
);
}
函数MapStateTops（状态）{
返回{
计数器：state.counter
}
}
功能图DispatchToprops（调度）{
返回{
increaseCounter:（）=>分派（{type:'INCREASE_COUNTER'}），
decreaseCounter:（）=>分派（{type:'DECREASE_COUNTER'}）
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（CounterApp）
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

---

请帮助我解决这个问题已经有好几个星期了。

您无法访问函数组件的

这个
，尤其是箭头函数。
props
是
CounterApp
组件的参数。然后，您的组件将如下所示：

const CounterApp=（道具）=>{
返回(
props.increaseCounter（）}>
增加
{props.counter}
props.decreaseCounter（）}>
减少
);
}