Reactjs 如何在 formik 中使用 onCompleted() 传递值

Posted 2023-03-10

【中文标题】Reactjs 如何在 formik 中使用 onCompleted() 传递值

【英文标题】：Reactjs How value is passed using onCompleted() in formik

【发布时间】：2020-08-26 08:26:30

【问题描述】：

onCompleted() 在 useMutation 中被调用，因为我想在突变完成时 open=true（open 是一个标志），而不是这个标志值应该传递给 const App() 以便显示 open=open 和警报。但是 open 的值在整个过程中都是错误的。 (2)。如果我设置 open=true，则屏幕上会显示带有登录按钮的 Welcome popUp，但是当我按下登录按钮并且 onclick() 触发时，它会给出错误“无法读取 'setNewUser' 的属性”，其中 setNewUser 是索引中的常量定义文件。

注册.js

const App = ( values, errors, touched, isSubmitting, dirty , isValid, setNewUser ) => 
 const styles= useStyles();

 const [open, setOpen]= useState(false) ;   //On new user dialog will open
// console.log(open)

  return (
  <div className=styles.root>
  <Paper className=styles.paper>
    <Form>

        <Field type="username" name="username"  placeholder="Username"  />

      <div>
        touched.email && errors.email && <p>Invalid Email </p>
        <Field type="email" name="email" placeholder="Email" />
      </div>

      <div>
        touched.password && errors.password && <p>Invalid password </p>
        <Field type="password" name="password" placeholder="Password"  />
      </div>

      <button  disabled=isSubmitting ||  !isValid || !dirty >
        Register
      </button>

    </Form>
    </Paper>

    <Dialog
// Here is the flag, its not changing to true
    open=open
    disableBackDropClick=true>

        <DialogTitle>
                <VerifiedUserTwoTone className=styles.icon/>   New Account created
        </DialogTitle>
        <DialogContent>
                <DialogContentText> Welcome values.username </DialogContentText>
        </DialogContent>
        <DialogActions>
                <button onClick=()=>setNewUser(false)>Login</button>
        </DialogActions>
    </Dialog>
    </div>
  );
;

const FormikApp = withFormik(
 //   enableReinitialize: true,

  mapPropsToValues( email, password, username ) 
    return 
      username: username || " ",
      password: password || " ",
      email: email || " ",
    ;
  ,
  validationSchema: Yup.object().shape(
    email: Yup.string()
      .email("Invalid email account")
      .required("field missing"),
    password: Yup.string()
      .min(8, "password is weak")
      .required()
  ),

  handleSubmit(values, setStatus, props, setSubmitting ) 
  //event.preventDefault();
    props.createUser(
      variables: values,
    ,   );

    setTimeout(()=>
    setSubmitting(false)
    setStatus("sent");
    console.log("Thanks!");
  ,1000);
  
)(App);

const Register = () => 

  const [createUser,loading,error] = useMutation(REGISTER_MUTATION ,
  
  onCompleted()
//   setOpen(true)
  
  );
 if (loading) return <p>loading...</p>;
 if (error) return <p>An error occurred</p>;

 return <FormikApp  createUser=createUser />;
;
export default Register;

index.js（表单的本地索引）

import React,useState from "react";
import withRoot from "../withRoot";
import Login from "./Login"
import Register from "./Register"


export default withRoot(() => 
  const [newUser, setNewUser]= useState(true)
  return  newUser?            //if user is new than goto Register otherwise Login page
<Register setNewUser=setNewUser/>
) : (
<Login/>
)
);

登录页面是注册的副本（不包括突变）。我坚持这一点，欢迎任何贡献。谢谢

【参考方案1】：

您没有将setNewUser 传递给<Register/>：

return <FormikApp  createUser=createUser setNewUser=props.setNewUser />;

您不能在 onCompleted 中使用 setOpen，因为它是在子级内部定义的。您需要将其定义得更高（在<Register /> 中）并将值（open）和setter（setOpen）作为道具传递。