使用react redux有效载荷和reducer将输入值传递给存储

Question

我有一个文本输入，我正试图将输入的值发送到我的reducer中的存储，然后在屏幕上显示该值。

看起来输入值甚至没有进入商店。。。有人能解释一下为什么我没有正确发送这个吗？

e.target.value正在引发Undefined错误。

成分

import React, { Component,setState } from 'react';
import { StyleSheet, View, Button, Text, StatusBar, TextInput, TouchableOpacity, Image } from 'react-native';
import { connect } from 'react-redux';

class Counter extends Component {
emailHandler() {
this.props.email();
}
toggleCounterHandler() {}
render() {
return (
<View>


<View ><Text style={styles.welcometext}>{this.props.value}</Text></View>
<View>

<TextInput
style={styles.input}
onChangeText= {(e) => this.props.emailHandler(e.target.value)} 
value={this.props.value}
secureTextEntry={false}
/>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
value: state.value
};
}

const mapDispatchToProps = dispatch => {
return {
email: (value) => dispatch({
type: 'email',
payLoad: value
})
//() => dispatch({type: 'email', text: this.state.text})
}
};

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

减速器

import React from 'react';
import { createStore } from 'redux';
const counterReducer = (state = { email:'email' }, action) => {
if (action.type === 'email') {
return {
...state,
email: action.payload,
};
}

console.log(state);
return state;
};
const store = createStore(counterReducer);
export default store;

Answer 1

如果您从文档中查看onChangeTextapi，它会直接将文本作为参数传递。因此，您不必使用e.target.value

还有第二件事，我注意到你把mapDispatchToProps作为email而不是emailHandler？所以你的redux函数应该是this.props.email

你不必创建另一个函数emailHandler来使用道具中的redux

你应该这样做：

import React, { Component,setState } from 'react';
import { StyleSheet, View, Button, Text, StatusBar, TextInput, TouchableOpacity, Image } from 'react-native';
import { connect } from 'react-redux';

class Counter extends Component {

toggleCounterHandler() {}
render() {
return (
<View>


<View ><Text style={styles.welcometext}>{this.props.value}</Text></View>
<View>

<TextInput
style={styles.input}
onChangeText= {(e) => this.props.email(e.target.value)} 
value={this.props.value}
secureTextEntry={false}
/>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
value: state.value
};
}

const mapDispatchToProps = dispatch => {
return {
email: (value) => dispatch({
type: 'email',
payLoad: value
})
//() => dispatch({type: 'email', text: this.state.text})
}
};

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