Question

我遇到了这段代码的问题。基本上，我想用动作调度更新输入值状态而不是用setState反应方法。到目前为止我有这个，状态总是返回undefined。有人可以帮助我，我坚持这个，我想不出任何我没有尝试的解决方案这只是与此问题相关的代码片段：

/* SignupForm.js */
    <InputField
       label="Name"
        name="name"
        type="text"
        floatingLabelText="Name"
        value={this.props.values[name]}
        onChange={this.onChange}
        errorText={this.state.errors.name}
    />
onChange = (event) => {
     this.props.onChange(event.target.name, event.target.value);
};

function mapStateToProps(state) {
    return {
        errorMessage: state.signup.error,
    values: state.update.values

    };
}
function mapDispatchToProps(dispatch) {
  return {
   onSave: data => dispatch(registerUser(data)),
   onChange: (name, value) => dispatch(formUpdate(name, value))
  };
}
/* reducerUpdate.js */
const INITIAL_STATE = {
  values:{}

};
const reducerForm = (state = INITIAL_STATE , action) => {
  switch(action.type) {
    case types.FORM_UPDATE_VALUE:
    return Object.assign({}, state, {
         values: Object.assign({}, state.values, {
           [action.name]: action.value
         })
       });
      }

      return state;
};
export default reducerForm;

/*actionUpdate.js */
let _formUpdateValue = (name, value, e) => {
    return {
        type: types.FORM_UPDATE_VALUE,
        name, 
        value
    };
};
export function formUpdate({ name, value}) {
  return dispatch => {
    dispatch(_formUpdateValue(name, value));
    console.log(name, value);
  };
}

Answer 1

不应该state.update.values是state.values.update吗？

function mapStateToProps(state) {
return {
    errorMessage: state.signup.error,
values: state.update.values //<- shouldn't this be state.values.update?

};

}

Answer 2

您的formUpdate不会返回操作对象，但会调度操作的函数。要处理这种情况，您应该使用thunk中间件（或类似的东西）。但是，在您的情况下根本不需要它，因为没有异步操作，因此您应该使用_formUpdateValue作为您的操作创建者（您可以删除当前的formUpdate函数并重命名_formUpdateValue到formUpdate它应该有效。

如何通过reducer和actions更新输入值状态而不使用redux-form

2 个答案: