Javascript 改变<；突变>；使用突变

我有一个removeUser页面，其中我使用了，然后使用

submitForm（）

函数进行错误处理。该代码运行得非常好：

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved ,setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  function StatusMessage(){
    if (isRemoved){
      return (
      <CustomAlert severity='success' text='User Removed'></CustomAlert>
        )
      }
   //else...
  }

  function submitForm(RemoveUserMutation: any, email: string) {
    setIsSubmitted(true);
      RemoveUserMutation({
        variables: {
            email: email,
        },
    }).then(({ data }: any) => {
      setIsRemoved(true);
    })
    .catch((error: { message: string; }) => {
      setIsRemoved(false);
      console.log("Error msg:" + error.message);
      setErrorMessage(error.message)
    })
  }

  return (
    <Mutation mutation={RemoveUserMutation}
    >
      {(RemoveUserMutation: any) => (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}
      >
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched
          } = props;
          const change = (name: string, e: any) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);           
          };
          return (
            <div className='main-content'>
              <form style={{ width: '100%' }}
               onSubmit={e => {e.preventDefault();
                submitForm(RemoveUserMutation, email)}}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <br></br>
                  <Button
                  type="submit"
                  disabled={!isValid || !email}
                  >
                    Remove User</Button>
                </div>
              </form>
              <br></br>
              {isSubmitted && StatusMessage()}
            </div>
          )
        }}
      </Formik>
    </div>
      )}
     </Mutation>
  );
}

即使变异成功了，我还有没有办法修改并使用相同的函数来处理我的错误

这是我现在尝试的，但不起作用：

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved ,setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation(RemoveUserMutation);

  function StatusMessage(){
    if (isRemoved){
      return (
      <CustomAlert severity='success' text='User Removed'></CustomAlert>
        )
      }
  }

  function submitForm(RemoveUserMutation: any, email: string) {
    setIsSubmitted(true);
      RemoveUserMutation({
        variables: {
            email: email,
        },
    }).then(({ data }: any) => {
      setIsRemoved(true);
    })
    .catch((error: { message: string; }) => {
      setIsRemoved(false);
      setErrorMessage(error.message)
    })
  }

  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}
      >
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched
          } = props;
          const change = (name: string, e: any) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);           
          };
          return (
            <div className='main-content'>
              <form style={{ width: '100%' }}
               onSubmit={e => {e.preventDefault();
                removeUser({variables: {todo: email }});}}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <br></br>
                  <Button
                  type="submit"
                  disabled={!isValid || !email}
                  >
                    Remove User</Button>
                </div>
              </form>
              <br></br>
              {isSubmitted && StatusMessage()}
            </div>
          )
        }}
      </Formik>
    </div>
  );
}

导出默认函数RemoveUserPage（）{
const[isSubmitted，setIsSubmitted]=useState（false）；
const[isRemoved，setIsRemoved]=useState（false）；
常量[errorMessage，setErrorMessage]=使用状态（“”）；
const[removeUser]=使用变异（RemoveUserBartation）；
函数StatusMessage（）{
如果（已删除）{
返回(
)
}
}
函数submitForm（removeUserVaritation:any，email:string）{
setIsSubmitted（true）；
移除用户突变({
变量：{
电邮:电邮,，
},
})。然后（{data}:any）=>{
setIsRemoved（true）；
})
.catch（（错误：{message:string；}）=>{
setIsRemoved（false）；
setErrorMessage（error.message）
})
}
返回(
{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
动作。设置提交（错误）；
}, 1000);
}}
validationSchema={schema}
>
{props=>{
常数{
值：{email}，
错误，
感动的，
handleChange，
是有效的，
Setfieldtouch
}=道具；
常量更改=（名称：字符串，e:any）=>{
e、 坚持（）；
handleChange（e）；
setFieldTouched（名称、真、假）；
};
返回(
{e.preventDefault（）；
removeUser（{变量：{todo:email}}）；}>



删除用户



{isSubmitted&&StatusMessage（）}
)
}}
);
}

再也没有理由让

RemoveUserMutation

发生变化--

removeUser

已经在范围内，所以只需使用它即可

function submitForm(email: string) {
  setIsSubmitted(true);
  removeUser({
    variables: {
      email,
    },
  })
  ...
}

您可以像这样继续使用

submitForm

函数：

onSubmit={e => {
  e.preventDefault();
  submitForm(email);
}}

这条线

removeUser({variables: {todo: email }})

---

由于没有

todo

变量，因此无法工作。由于您使用的是TypeScript，所以您应该为查询生成类型定义，然后将它们与挂钩一起使用。这将防止类似的错误。

如果我在

onSubmit（）

上使用我的

submitForm（）

，我不再需要

removeUser（{variables:{email}）在那边，对吗？据我所知，实际的变异现在只能从功能上起作用。我说的对吗？removeUser将在组件中的任何位置工作，包括在它之后声明的任何函数中
removeUser({variables: {todo: email }})