swr的'suppressHydrationWarning'错误为null如何处理swr的空数据

问题描述

我将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 hook的空输入？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）