如何解决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 举报,一经查实,本站将立刻删除。