Блог

Я использую 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-хука?