Redux - 在 TextInput 组件中输入内容后状态不会正确更新

Question

我正确地完成了 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"

Answer 1

问题

email 最初是一个空字符串，当您调度 EMAIL_CHANGED 时，您会尝试将带有键 key 和 value 的对象连接到它。您的组件仅访问state.auth.email。我绝对确定应该在某处抛出错误。文本输入中的onChangeText 值是整个 值，而不是增量值，因此您不应该连接或附加任何内容，只需完全替换现有的电子邮件状态（您已了解这部分正确的密码，实际上）。

附加处理程序的方式也存在问题。

onChangeText={() => this.onEmailChange.bind(this)}

这会删除 onChangeText 值并将 undefined 传递给您的处理程序。

解决方案

更新reducer case以正确更新email值。

case EMAIL_CHANGED:
  return {
    ...state, 
    email: action.payload,
  }

更新处理程序以使用更改的值。

onChangeText={this.onEmailChange.bind(this)}

提示：要保存 this 的绑定，您可以在 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
    }
  }

在组件中正确访问 email 值

const mapStateToProps = state => {
  return {
    email: state.auth.email.value, // <-- get the email value
    ...
  }
}