React-Native Redux 连接语法错误

Question

我正在学习 Redux。我不知道为什么会出现语法错误。我正在构建一个简单的计数器应用程序。

这是我的代码。我不太擅长 react-native 和 redux。所以我真的需要 help.Plase 帮助我。我不知道我哪里错了。我认为问题是 View.js.

App.js

`import React from 'react';
 import Screen from './src/View';
 import { Provider,createStore } from 'react-redux';

 const store = createStore(reducers);

 const App=()=>{
  return(
     <Provider store={store}>
        <Screen/>
     </Provider>
    )
   } 


export default App;`

View.Js 这部分有语法错误。

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

export default function Screen (){

return(
    <View >
        <Text style={styles.containers}>counter: </Text>
        <Text style={styles.containers}>{this.props.state.counterNum}</Text>
        <Button title="+" >+</Button>
        <Button title="-" >-</Button>
    </View>
     );
 };
const styles=StyleSheet.create({
   containers : {
      textAlign:"center",
  }
}
);
function mapStateToProps(state){
return {
  state: state.counterNum
 };
}

// Actions을 props로 변환
function matchDispatchToProps(dispatch){
   return bindActionCreators({
    counter : counterNum
  }, dispatch);
 }

 //(error here)
 export default connect(mapStateToProps, matchDispatchToProps)(Screen)

index.js

export const INCREMENT = 'INCREMENT';  
export const DECREMENT = 'DECREMENT'; 


const initialState={
    counter:[
        {
            counterNum:0,
        },
    ],
};
const counter=( state= initialState, action)=>{
    const {counter}=state;
    switch(action.type){
        case 'INCREMENT':
            return({
                counter:[
                    ...counter.slice(0,action.index),
                    {
                        counterNun : counter[action.index].counterNum +1,
                    }
                ]
            });
        case 'DECREMENT' : 
        return({
            counter:[
                ...counter.slice(0,action.index),
                {
                    counterNun : counter[action.index].counterNum -1,
                }
            ]
        });
        default :
            return state;
    }
}
export default counter;

任何 help/knowledge 将不胜感激，谢谢！

Answer 1

您似乎在尝试对 class 个组件使用语法。

尝试像这样将道具传递到屏幕中：

export default function Screen (props){
return(
    <View >
        <Text style={styles.containers}>counter: </Text>
        <Text style={styles.containers}>{props.state}</Text>
        <Button title="+" >+</Button>
        <Button title="-" >-</Button>
    </View>
     );
 };

不需要 this 关键字

此外，最好这样做：

function mapStateToProps(state){
  return {
    counterNum: state.counterNum // <-- change property name to counterNum
   };
}

然后您可以使用 props.counterNum

访问此值

React-Native Redux 连接语法错误

React-Native Redux connect syntaxError

syntax

syntax-error

react-native

react-redux