JOSN问题Unexpected token c in JSON at position 19

344 阅读1分钟

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是空数组代表第一次进来就执行

猜想对了! 报错解决~