Question

在通过axios库成功提交后，我在输入中清除值并在platform/android/res中选择表单元素时遇到问题。只是想提一下我不使用react form。

我不知道我是否走在正确的轨道上，这是我的工作流程：我用redux-form写了一个表格，通过道具给出每个输入和选择值，我访问并更新状态通过这些道具。我已经编写了用于更新输入值的操作和缩减器，并且在我的组件中调度了一个操作，但是第二个操作和应该在提交后清除值的reducer不能按预期工作。这是主要的问题，我不确定我是否在正确的位置发送FORM_RESET动作表单，因为我在负责将数据发布到服务器的动作中调用它，并且在成功回调时我调度FORM_RESET。

以下是与此问题相关的代码。

/ * actionRegister.js * /

react-bootstrap

/ * actionForm.js * /

let _registerUserFailure = (payload) => {
    return {
        type: types.SAVE_USER_FAILURE,
        payload
    };
};
let _registerUserSuccess = (payload) => {
    return {
        type: types.SAVE_USER_SUCCESS,
        payload,
        is_Active: 0,
        isLoading:true
    };
};

let _hideNotification = (payload) => {
    return {
        type: types.HIDE_NOTIFICATION,
        payload: ''
    };
};

//asynchronous helpers
export function registerUser({ //use redux-thunk for asynchronous dispatch
    timezone,
    password,
    passwordConfirmation,
    email,
    name
}) {
    return dispatch => {
        axios.all([axios.post('/auth/signup', {
                    timezone,
                    password,
                    passwordConfirmation,
                    email,
                    name,
                    is_Active: 0
                })
                // axios.post('/send', {email})
            ])
            .then(axios.spread(res => {
                dispatch(_registerUserSuccess(res.data.message));
                dispatch(formReset()); //here I dispatch clearing form data
                setTimeout(() => {
                    dispatch(_hideNotification(res.data.message));
                }, 10000);
            }))
            .catch(res => {
                dispatch(_registerUserFailure(res.data.message)); //BE validation and passport error message
                setTimeout(() => {
                    dispatch(_hideNotification(res.data.message));
                }, 10000);
            });
    };
}

/ * reducerRegister.js * /

//synchronous action creators
export function formUpdate(name, value)  {
    return {
        type: types.FORM_UPDATE_VALUE,
        name, //shorthand from name:name introduced in ES2016
        value
    };
}
export function formReset() {
  return {
    type: types.FORM_RESET
  };
}

/ * reducerForm.js * /

const INITIAL_STATE = {
  error:{},
  is_Active:false,
  isLoading:false
};
const reducerSignup = (state = INITIAL_STATE , action) => {
  switch(action.type) {
    case types.SAVE_USER_SUCCESS:
      return { ...state, is_Active:false, isLoading: true, error: { register: action.payload }};
      case types.SAVE_USER_FAILURE:
      return { ...state, error: { register: action.payload }};
      case types.HIDE_NOTIFICATION:
      return { ...state , error:{} };
   }
      return state;
};
export default reducerSignup;

/ * SignupForm.js * /

const INITIAL_STATE = {
    values: {}
};
const reducerUpdate = (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,
                })
            });
        case types.FORM_RESET:
        return INITIAL_STATE;
        //here I need isLoading value from reducerRegister.js
    }
    return state;
};
export default reducerUpdate;

Answer 1

无需使用redux-form :-)您正确地走在正确的道路上并且在正确的位置呼叫FORM_RESET行动。

一些事情：

您确定要导入formReset中的actionRegister.js吗？

reducerForm

我建议仍然在这里返回新状态：

case types.FORM_RESET: return { ...INITIAL_STATE }; // or Object.assign({}, INITIAL_STATE)

顺便说一下。你为什么要成功isLoading: true？我建议创建3个动作而不是2个动作：

SAVE_USER_START（您在发送请求前dispatch），将isLoading设置为true，
SAVE_USER_SUCCESS - 将isLoading设置为false
SAVE_USER_FAILURE - 将isLoading设置为false

Answer 2

我建议调查class OpeningHour < ActiveRecord::Base belongs_to :entry validates_presence_of :day, :closes, :opens, :entry_id validates_inclusion_of :day, :in => 1..7 validate :opens_before_closes validate :valid_from_before_valid_through # sample validation for better user feedback validates_uniqueness_of :opens, scope: [:entry_id, :day] validates_uniqueness_of :closes, scope: [:entry_id, :day] protected def opens_before_closes errors.add(:closes, I18n.t('errors.opens_before_closes')) if opens && closes && opens >= closes end def valid_from_before_valid_through errors.add(:valid_through, I18n.t('errors.valid_from_before_valid_through')) if valid_from && valid_through && valid_from >= valid_through end end库。它提供了配置选项，可以在提交后立即清除字段。

提交后，React / Redux清除表单元素值

2 个答案: