使用redux未定义的值

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}})
  }
}

附言：我删除了部分不必要的代码(如按钮和输入文本(。如果需要更多的代码，请告诉我

我的问题是：我做错了什么？我的控制台上不断出现用户名、密码、电子邮件和其他一切的"未定义"日志("TEST"(。我的店铺布置得很好。此外，我还可以看到在操作和减速器上接收到的值，以及正确的"键"one_answers"值"。

如有任何帮助，我们将不胜感激。提前谢谢。

Answer 1

您需要做两件事来解决这个问题。首先，正如其他人所提到的，您需要在构造函数中绑定validateConfirmationPassword()，以确保函数在被onPress:调用时具有正确的上下文

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

其次，您需要调整尝试访问username的区域。您指出，当您在mapStateToProps()中记录state时，您看到的是一个对象，例如{ "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);
}