0

我正在尝试按照本教程学习表单验证，除了我只使用前两个输入并使用打字稿。这是我定义的类型、初始状态和调度

import { useReducer } from "react";
export interface FormState {
  name: Input;
  email: Input;
  isFormValid: boolean;
}
export interface Input {
  value: string;
  touched: boolean;
  hasError: boolean;
  error: string;
}
export interface FormActions {
  type: string;
  data: {
    name: string;
    value: string;
    hasError: boolean;
    error: string;
    touched: boolean;
    isFormValid: boolean;
  };
}
const initialState: FormState = {
  name: { value: '', touched: false, hasError: false, error: '' },
  email: { value: '', touched: false, hasError: false, error: '' },
  isFormValid: false
};
const formReducer = (state: FormState, action: FormActions) => {
  switch (action.type) {
    case 'update': {
      const { name, value, hasError, error, touched, isFormValid } =
        action.data;

      return {
        ...state,
        [name]: {
          ...(state[name as keyof FormState] as Input),
          value,
          hasError,
          error,
          touched
        },
          isFormValid
        
      };
    }
}
}
const [formState, dispatch] = useReducer(formReducer, initialState);

但是这段代码给了我 formstate 类型的参数不能分配给永远不会在这一行出错

const [formState, dispatch] = useReducer(formReducer, initialState);

如果我像这样更改我的调度：

case ACTIONS.UPDATE: {
      const { name, value, hasError, error, touched, isFormValid } =
        action.data;

      return {
        ...state,
        [name]: {
          ...(state[name as keyof FormState] as Input),
          value,
          hasError,
          error,
          touched,        
          isFormValid
}

      };
    }

那么没有错误，但是它将状态对象更改为不同的对象，其中 isFormValid 属性添加了名称和电子邮件，并将所有其他属性添加到 isFormValid 属性并将其转换为对象，这在我尝试检查 isFormValid 以进行验证时会导致问题。国家从此转向

isFormValid: false
email: {value: "", touched: false, hasError: false, error: ""}
name: {value: "", touched: true, hasError: true, error: "name cannot be empty", isFormValid: false}

对此：

isFormValid: {value: undefined, hasError: false, error: "", touched: true, isFormValid: false}
email: {value: "sdfsd", touched: true, hasError: true, error: "email cannot be empty", isFormValid: false}
name: {value: "Fds", touched: true, hasError: false, error: "", isFormValid: false}

同样在本教程中，我不明白作者在提交处理程序中循环所有表单状态键以进行验证的部分，但其中一个键是 isFormValid ，它没有像其他输入那样的属性。我一直试图弄清楚这几天，但没有运气。任何帮助将不胜感激，或者如果有更好的方法请分享。

4

0 回答 0