React记账项目遇到的问题
问题:Unexpected token c in JSON at position 19
问题原因:js中json 解析失败,
解析失败原因:所以请把你的数据换成这种格式:“是双引号不是单引号”
问题代码:
const useTags =() =>{//封装一个自定义hook
let localTags = JSON.parse(window.localStorage.getItem('tags') ||
'[ {id:createId(),name:'衣服'}, {id:createId(),name:'吃饭饭'}, {id:createId(),name:'家庭消费'}, {id:createId(),name:'粗去玩~'}, ]');
const [tags,setTags] = useState<{id:number ; name:string}[]>(localTags);
useEffect(()=>{
setTags(localTags);
},[]);//deps是空数组代表第一次进来就执行
尝试第一种解决方法:
const useTags =() =>{//封装一个自定义hook
let localTags = JSON.parse(window.localStorage.getItem('tags') ||
'[ {"id":createId(),"name":'衣服'}, {"id":createId(),"name":'吃饭饭'}, {"id":createId(),"name":'家庭消费'}, {"id":createId(),"name":'粗去玩~'},]');
const [tags,setTags] = useState<{id:number ; name:string}[]>(localTags);
useEffect(()=>{
setTags(localTags);
},[]);//deps是空数组代表第一次进来就执行
没有解决问题,还是会报错,后面我才发现,原来我的created()是个函数在JSON.parse里无法解析。所以 我就想是不是可以先JSON.stringify,变成一个字符串以后再变成对象。这样函数依旧可以调用,调用后再变成字符串,格式应该就不会有问题了
代码如下:
const useTags =() =>{//封装一个自定义hook
const defaultTags=JSON.stringify([
{"id":createId(),"name":"衣服"},
{"id":createId(),"name":"吃饭饭"},
{"id":createId(),"name":"家庭消费"},
{"id":createId(),"name":"粗去玩"}
]);
let localTags = JSON.parse(window.localStorage.getItem('tags') || defaultTags);
const [tags,setTags] = useState<{id:number ; name:string}[]>(localTags);
useEffect(()=>{
//setTags(localTags)
setTags((localTags)=>([...localTags]));
},[]);//deps是空数组代表第一次进来就执行