Question

尝试更新我的状态时遇到两个问题。首先，输入中的第一个字母没有直接更新到状态——在console.log中我可以看到useReducer首先调用initialState然后调度动作，所以注册的输入是一个字母实际用户的输入。

能否请您指导我并向我展示更新对象状态的最佳方法？我想我应该在更多的键上分配调度，但我觉得有点迷茫，真的不知道如何正确调度。

PS 当然我调度了更多的动作 - 那是有效的 - 所以我隐藏了其中的一些，因此是初始状态的结构 :)

在 Inputs.ts 中调用 useReducer

const [store, dispatch] = useReducer(reducer, initialState);

Actions.ts

export const SET_INPUT_STATE = 'SET_INPUT_STATE';
export const setInputState = (dispatch, payload) => dispatch({ type: SET_INPUT_STATE, payload });

Store.ts

import { SET_INPUT_STATE } from './actions';

export interface StateType {
  formState: Record<string, { value: string; isValid: boolean }>;
}

export const initialState: StateType = {
  inputState: {
    email: {
      value: '',
      isValid: false,
    },
    password: {
      value: '',
      isValid: false,
    },
    confirmedPassword: {
      value: '',
      isValid: false,
    },
    name: {
      value: '',
      isValid: false,
    },
  },
};

export const reducer = (state: StateType, action): StateType => {
  const { type, payload } = action;
  switch (type) {
    case SET_FORM_STATE:
      return {
        ...state,
        inputState: { ...state.inputState, [payload.name]: { isValid: payload.isValid, value: payload.value } },
      };
    default:
      return state;
  }
};

useReducer - 如何获取和更新以前的状态

0 个答案: