我将 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 钩子的空输入?