![](/img/trans.png)
[英]Getting ERROR in React JS: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data?
[英]Unhandled Runtime Error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data in nextjs
我在 nextjs 中使用 js-cookie package 時遇到問題。 我使用上下文 api 設置商店。 我最初的 state 是
const initialState = {
darkMode: Cookies.get('darkMode') === 'ON' ? true : false,
cart: {
cartItems: Cookies.get('cartItems')
? JSON.parse(Cookies.get('cartItems'))
: [],
},
userInfo: Cookies.get('userInfo')
? JSON.parse(Cookies.get('userInfo'))
: null,
};
購物車和暗模式工作正常,但 userInfo 未定義。 它給了我這個錯誤
這是我的 login.js 頁面代碼
import React, { useState, useContext, useEffect } from 'react';
import Layout from '../components/Layout/Layout';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import {
Typography,
Button,
List,
ListItem,
TextField,
Link,
} from '@material-ui/core';
import useStyles from '../utils/style';
import axios from 'axios';
import { Store } from '../utils/store';
import Cookies from 'js-cookie';
const Login = () => {
const router = useRouter();
const { redirect } = router.query;
const { state, dispatch } = useContext(Store);
const { userInfo } = state;
useEffect(() => {
if (userInfo) {
router.push('/');
}
}, []);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const classes = useStyles();
const submitHandler = async (e) => {
e.preventDefault();
try {
const { data } = axios.post('/api/users/login', { email, password });
dispatch({ type: 'USER_LOGIN', payload: data });
Cookies.set('userInfo', data);
router.push(redirect || '/');
} catch (err) {
alert(err.response.data ? err.response.data.message : err.message);
console.log(err.message);
}
};
return (
<Layout title='Login'>
<form onSubmit={submitHandler} className={classes.form}>
<Typography component='h1' variant='h1'>
Login
</Typography>
<List>
<ListItem>
<TextField
variant='outlined'
fullWidth
id='email'
label='Email'
inputProps={{ type: 'email' }}
onChange={(e) => setEmail(e.target.value)}
></TextField>
</ListItem>
<ListItem>
<TextField
variant='outlined'
fullWidth
id='password'
label='Password'
inputProps={{ type: 'password' }}
onChange={(e) => setPassword(e.target.value)}
></TextField>
</ListItem>
<ListItem>
<Button variant='contained' type='submit' fullWidth color='primary'>
Login
</Button>
</ListItem>
<ListItem>
Do n0t have an account?
<NextLink href='/register' passHref>
<Link>Register Here</Link>
</NextLink>
</ListItem>
</List>
</form>
</Layout>
);
};
export default Login;
請幫我解決這個問題。 任何幫助將不勝感激。 謝謝
當您在第二個參數中執行Cookies.set
時,您傳遞object
它將像這樣[object%20Object]
保存,但它必須是string
。 首先,您必須通過JSON.stringify()
將object
轉換為string
,然后設置為 cookie。
Cookies.set('userInfo', JSON.stringify(data));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.