我正在學習 Redux。我不知道為什么會出現語法錯誤。我正在構建一個簡單的計數器應用程式。
這是我的代碼。我不太擅長 react-native 和 redux。所以我真的需要幫助。請幫助我。我不知道我錯在哪里。我認為問題是 View.js。
應用程式.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;
任何幫助/知識將不勝感激，謝謝！
uj5u.com熱心網友回復：
看起來您正在嘗試對類組件使用語法。
嘗試像這樣將 props 傳遞到 Screen 中：
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422642.html
標籤：
上一篇：如何僅獲取緯度/經度博覽會位置