1

我将 next.js 与 swr 一起使用,我的代码是:

import { Typography } from '@material-ui/core';
import { Formik, Form, Field} from 'formik'
import useSWR, { mutate } from 'swr';
import { myRequest } from '../libs/auth';
import Axios from 'axios';
interface Props {
    username: string;
    password: string;
    message: string;
}

const LoginForm: React.FC<Props> = (loginData: Props)=>{
    const login_req = new myRequest('post', loginData)
    const {data} = useSWR('/api/user/login', login_req.send)  //delete these line no errors

    return (
        <>
            <Typography variant="h3">
            Login
            </Typography>
            <Formik  onSubmit ={async(values, formikHelpers) =>{
                mutate('/api/user/login', [...data, values], false) //delete these line no errors
                await Axios.post('/api/user/login', values)
                alert(JSON.stringify(values))
                formikHelpers.setSubmitting(false)
            }}
            initialValues={{ username: '', password:'' }}
            >
                <Form>
                    <label htmlFor="message"></label>
                    <label htmlFor="username">email:</label>
                    <Field name="username" ref ></Field>
                    <label htmlFor="password">password:</label>
                    <Field name='password' type="password"></Field>
                    <button type="submit">Submit</button>
                </Form>
            </Formik>
        </>  
    )

}

export default LoginForm

错误是:

TypeError: Cannot read property 'suppressHydrationWarning' of null

我认为这是我的请求将发送 null 作为响应,因为人们不会在加载时初始化用户名。

有没有办法处理 swr 钩子的空输入?

4

0 回答 0