reactjs - Redux - 在 TextInput 组件中输入内容后状态不会正确更新
问题描述
我正确地完成了 redux 教程的所有说明。但是运行程序后,当我尝试在电子邮件或密码中输入一个值时TextInput
,该值并没有放入其中,并且电子邮件输入立即被清空。我不知道我在哪里做错了。但我认为该操作无法正常工作。我希望你能指导我。
在 Action 目录 > index.js
import { EMAIL_CHANGED, PASS_CHANGED, USER_LOGIN_ATEMT, USER_LOGIN_SUCCESS, USER_LOGIN_FAILED } from "./types";
export const emailChanged = (text) => {
return {
type: EMAIL_CHANGED,
payload: text
}
}
export const passChanged = (text) => {
return {
type: PASS_CHANGED,
payload: text
}
}
export const loginUser = ({ email, pass }) => {
return (dispatch) => {
dispatch({ type: USER_LOGIN_ATEMT });
fetch('', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: pass
})
}).then((response) => response.json()).
then((responseJson) => {
if (responseJson === 'Data Matched') {
loginUserSuccess(dispatch);
} else {
loginUserFailed(dispatch);
}
}).catch((error) => { alert(error) });
}
}
const loginUserSuccess = (dispatch) => {
dispatch({ type: USER_LOGIN_SUCCESS });
}
const loginUserFailed = (dispatch) => {
dispatch({ type: USER_LOGIN_FAILED });
}
在 Action 目录 > types.js
export const EMAIL_CHANGED = 'EMAIL_CHANGED';
export const PASS_CHANGED = 'PASS_CHANGED';
export const USER_LOGIN_ATEMT = 'USER_LOGIN_ATEMT';
export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS';
export const USER_LOGIN_FAILED = 'USER_LOGIN_FAILED';
在组件目录> LoginForm.js
import React, { Component } from 'react';
import { View, TextInput, Text, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, passChanged, loginUser } from '../actions/index';
class LoginForm extends Component {
onEmailChange(text) {
this.props.emailChanged(text)
}
onPassChange(text) {
this.props.passChanged(text)
}
onLoginUser() {
const { email, pass } = this.props;
this.loginUser({ email, pass });
}
renderButton() {
if (this.props.loading) {
return (<ActivityIndicator size="large" color="#0000ff" />);
} else {
return (
<TouchableOpacity onPress={() => this.onLoginUser.bind(this)} >
<Text>Continue...</Text>
</TouchableOpacity>
)
}
}
render() {
return (
<View>
<TextInput
placeholder="Email"
onChangeText={() => this.onEmailChange.bind(this)}
value={this.props.email}
/>
<TextInput
placeholder="Pass"
onChangeText={() => this.onPassChange.bind(this)}
secureTextEntry={true}
value={this.props.pass}
/>
<Text>{this.props.error}</Text>
{this.renderButton()}
</View>
);
}
}
const mapStateToProps = state => {
return {
email: state.auth.email,
pass: state.auth.pass,
loading: state.auth.loading,
error: state.auth.error
}
}
export default connect(mapStateToProps, { emailChanged, passChanged, loginUser })(LoginForm);
在 reducers 目录 > AuthReducer.js
import { EMAIL_CHANGED, PASS_CHANGED, USER_LOGIN_ATEMT, USER_LOGIN_SUCCESS, USER_LOGIN_FAILED } from '../actions/types';
const initialState = {
email: '',
pass: '',
loading: false,
error: ''
}
const AuthReducer = (state = initialState, action) => {
console.log(action);
switch (action.type) {
case EMAIL_CHANGED:
return { ...state,
email: state.email.concat({
key: Math.random(),
value: action.payload
})
}
case PASS_CHANGED:
return { ...state, pass: action.payload }
case USER_LOGIN_ATEMT:
return { ...state, loading: true }
case USER_LOGIN_SUCCESS:
return { ...state, ...initialState }
case USER_LOGIN_FAILED:
return { ...state, loading: false, pass: '', error: 'اشتباه وارد شده است' }
default:
return state;
}
}
export default AuthReducer;
在 reducers 目录 > index.js
import { combineReducers } from 'redux';
import AuthReducer from '../reducers/AuthReducer';
const reducers = combineReducers({
auth: AuthReducer
});
export default reducers;
在 App.js 中
import React, { Component } from 'react';
import { View, TextInput, Text, FlatList, Pressable } from 'react-native';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import reducers from './reducers/index';
import LoginForm from './components/LoginForm';
import ReduxThunk from 'redux-thunk';
export default class App extends Component {
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<LoginForm />
</Provider>
);
}
}
在 index.js 中
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
我的 package.json
"react": "16.13.1",
"react-native": "0.63.4",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
解决方案
问题
email
最初是一个空字符串,当您分派时,EMAIL_CHANGED
您尝试将对象与键连接起来并连接key
到value
它。您的组件仅访问state.auth.email
. 我绝对确定应该在某处抛出错误。onChangeText
来自文本输入的值是整个值,而不是增量,因此您不应该连接或附加任何内容,只需完全替换现有的电子邮件状态(实际上,这部分是正确的密码)。
附加处理程序的方式也存在问题。
onChangeText={() => this.onEmailChange.bind(this)}
这会删除该onChangeText
值并将 undefined 传递给您的处理程序。
解决方案
更新减速器案例以正确更新email
值。
case EMAIL_CHANGED:
return {
...state,
email: action.payload,
}
更新处理程序以使用更改的值。
onChangeText={this.onEmailChange.bind(this)}
提示:要保存 this 的绑定,您可以在 a 中执行此操作constructor
或使用箭头函数。
onEmailChange = (text) => {
this.props.emailChanged(text)
}
...
onChangeText={this.onEmailChange}
第二个提示:您可以直接将传递的处理程序附加到输入并保存函数声明和this
绑定。
onChangeText={this.props.onEmailChange}
如果由于某种原因您需要随机键值(随机值是较差的键/ID,因为它们不能保证是唯一的)然后更新如下:
提供有效的初始状态
const initialState = {
email: {}, // <-- empty object, provides object to destructure from in UI
...
}
完全替换email
对象
case EMAIL_CHANGED:
return { ...state,
email: {
key: Math.random(),
value: action.payload
}
}
在组件中正确访问电子邮件值
const mapStateToProps = state => {
return {
email: state.auth.email.value, // <-- get the email value
...
}
}
推荐阅读
- c# - 用任意数量问题的所有可能组合填充表格的算法
- php - 如何与 Laravel 中公用文件夹文件中的数据库进行交互?
- ios - XMPP 聊天问题
- django - 中间件 django 身份验证
- python - int 和 double 的正则表达式
- python - 连接列表中的字符串时遇到问题
- python - pandas 归一化值计数中特定元素的总和(KNN 分类)
- python - infer_datetime_format 与 parse_date 花费更多时间
- node.js - Typeorm Postgres 迁移未运行
- javascript - Google Cloud Function WHERE 查询过滤器不起作用