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

【问题标题】：Reactjs How value is passed using onCompleted() in formikReactjs 如何在 formik 中使用 onCompleted() 传递值
【发布时间】：2020-08-26 08:26:30
【问题描述】：

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

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/>
)
});

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

【问题讨论】：

标签： javascript reactjs graphql apollo-client formik

【解决方案1】：

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

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

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

【讨论】：