提交表单后处理路由

Question

你好，我伟大的StackOverflow老师。我正在浏览ben awads的全栈教程，并试图添加一个图像上传功能来创建帖子。看起来一切正常，将帖子(包括图片)插入到数据库中。但是，在提交表单后，它不会将我转到主页(停留在插入了当前值的同一页上)。它的设置是，如果没有错误，请将我路由到主页。我假设我没有错误导致post插入到数据库中。任何帮助都将不胜感激。

const CreatePost: React.FC<{}> = ({}) => {
  const router = useRouter();
  const [createPost] = useCreatePostMutation();
  return (
    <Layout>
      <Formik
        initialValues={{ title: "", text: "", file: null }}
        onSubmit={async (values) => {
          console.log(values);
          const { errors } = await createPost({
            variables: values,
          });
          if (!errors) {
            router.push("/");
          }
        }}
      >
        {({ isSubmitting, setFieldValue }) => (
          <Form>
            <InputField name="title" placeholder="title" label="Title" />
            <Box mt={4}>
              <InputField name="text" placeholder="text..." label="Body" />
            </Box>
            <Input
              mt={4}
              required
              type="file"
              name="file"
              id="file"
              onChange={(event) => {
                setFieldValue("file", event.currentTarget.files[0]);
              }}
            />
            <Button mt={5} type="submit" isLoading={isSubmitting}>
              create post
            </Button>
          </Form>
        )}
      </Formik>
    </Layout>
  );
};

Answer 1

你可以使用router.push钩子。

您需要将验证函数作为道具传递给Fomik，以防止仅提交2个字段。我已经添加了一个基本的验证对象。但是你也可以使用Yup包。Formik将在表单中返回一个错误对象，您需要确保表单不会在错误状态下提交。为此，获取errors对象，并在使用自定义Button组件时，通过检查是否存在错误来传递true/false。我添加了代码。

您可以通过here获取更多详细信息。

router.push("/home");

.....

const validate={values => {
         const errors = {};
         if (!values.title) {
           errors.email = 'Required';
         } 
         if (!values.text) {
           errors.text= 'Required';
         }
         if (!values.file) {
           errors.file= 'Required';
         }
         return errors;
       }}

<Formik
        initialValues={{ title: "", text: "", file: null }}
        validate
        onSubmit={async (values) => {

.......
{({ isSubmitting, setFieldValue, errors }) => (
..........

<Button mt={5} type="submit" isLoading={isSubmitting} isFormValid={!Object.values(errors).find(e => e)}>
              create post
            </Button>