Неопределенное значение с использованием приставки

Question

Я опубликую код и сделаю вопрос в конце.

SignUpScreen.js

export default class SignUpScreen extends Component {

constructor(props) {
  super(props);
}

validateConfirmationPassword() {
  const { username } = this.props;

  console.log("TEST >> " + username);
}

render() {
  const { username, password, email, confirmPassword } = this.props;

  <Input
    placeholder="Username"
    value={username}
    onChangeText= {(value) => this.props.onChangeText('username', value)}
  />

  <Button
    onPress={() => this.validateConfirmationPassword()}
  />
}

SignUpScreen_reducer.js

export default function reducer(state={
  username: '',
  email: '',
  password: '',
  confirmPassword: '',

  usernameError: false,
  emailError: false,
  passwordError: false,
}, action) {

const { type, payload } = action

switch(type) {

    case 'ON_CHANGE_UI_FIELD' : {
        return {...state, [payload.key]: payload.value}
    }
    default: {
        return state
    }
}

SignUpScreenContainer.js

const mapStateToProps = (state) => {
  return {
    ...state,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onChangeText: (key, value) => {
      dispatch(onChangeField(key, value))
    },
  }
}

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

SignUpScreen_actions.js

export function onChangeField(key, value) {
  return (dispatch) => {
    dispatch({type: 'ON_CHANGE_UI_FIELD', payload: {key, value}})
  }
}

PS: я удалил часть кода, которая была ненужной (например, кнопки и ввод текста). Если вам нужно больше кода, пожалуйста, дайте мне знать.

Мой вопрос: что я делаю не так? Я продолжаю получать «undefined» в моем console.log («TEST») для имени пользователя, пароля, электронной почты и всего остального. У меня правильно настроен магазин. Также я вижу значения, полученные на действиях и на редукторе, с правильными «ключом» и «значением».

Любая помощь будет оценена. Заранее спасибо.

Answer 1

Вам нужно сделать две вещи, чтобы решить эту проблему.Во-первых, как уже упоминали другие, вам нужно связать validateConfirmationPassword() в конструкторе, чтобы гарантировать, что функция имеет правильный контекст при вызове onPress:

constructor(props) {
  super(props);
  this.validateConfirmationPassword = this.validateConfirmationPassword.bind(this);
}

Во-вторых, вам нужно будет отрегулировать, как вы пытаетесь использовать область.для доступа username.Вы указали, что когда вы регистрируете state внутри mapStateToProps(), вы видите объект, такой как { "signUpScreenReducer": { "email": "", "emailError": false, "password": "", "passwordError": false, "username": "", "usernameError": false, }.Вы пытаетесь получить доступ к username как const { username } = this.props;, но все вложено в свойство signUpScreenReducer.Вам нужно будет получить к нему доступ, например:

const { username } = this.props.signUpScreenReducer;

Или вы можете изменить mapStateToProps() на Object, распространяющий фактические свойства объекта signUpScreenReducer (state.signUpScreenReducer):

const mapStateToProps = ({ signUpScreenReducer }) => {
  return {
    ...signUpScreenReducer,
  }
}

Вам даже не нужен спред, вы можете просто:

const mapStateToProps = ({ signUpScreenReducer }) => signUpScreenReducer;

Надеюсь, это поможет!

Answer 2

-Просто замените функцию validateConfirmationPassword на версию ниже.

validateConfirmationPassword = () => {
  const { username } = this.props;

  console.log("TEST >> " + username);
}

ИЛИ сделайте привязку для этой функции в конструкторе, как показано ниже

constructor(props) {
  super(props);
  this.validateConfirmationPassword = this.validateConfirmationPassword.bind(this);
}