Question

我刚刚尝试使用ReactJs将数组数据存储在localStorage中。
下面的代码：

<a href="#" id="nextpage">link</a>

第一次使用未定义的localDatas变量时。我的意思是在localStorage上没有设置名称时。
如果是第一次运行，并且每当我尝试推送新数据时，它就会生成错误。
以下错误：

TypeError：items.push不是函数

storeData(){

    const datas = {
        name : this.state.prevName,
        id : Date.now()
    }

   var localDatas = localStorage.getItem('names');

    if(!localDatas){
        localStorage.setItem('names',JSON.stringify(datas));
    }else{
        var items = [];
        items = JSON.parse(localStorage.getItem('names'));
        items.push(datas);
        localStorage.setItem('names',JSON.stringify(items));
    }
}

如何解决这个问题？

Answer 1

未定义第一个localDatas时，它将localStorage项设置为对象，而不是数组。

第二次调用此函数，items是一个对象而不是数组，因此没有.push。

        var items = []; // items is array
        items = JSON.parse(localStorage.getItem('names')); // items is now OBJECT!!
        items.push(datas); // can't do a .push to an object
        localStorage.setItem('names',JSON.stringify(items));

您可以将datas做成一个数组，一切都应该正常工作。

    const datas = [{
    name : this.state.prevName,
    id : Date.now()
}]

FIX： 由于数据现在是一个数组，我们只想将对象推入内部，而不是： items.push(datas);应该是：items.push(datas[0]);

Answer 2

问题是JSON.parse返回一个对象（不是数组）。作为对象，它没有任何“推”方法。

您可以通过确保“数据”以数组开头来解决此问题：

let storeData = () => {

    const datas = [{
        name : this.state.prevName,
        id : Date.now()
    }]

   var localDatas = localStorage.getItem('names');

    if(!localDatas) {
        localStorage.setItem('names',JSON.stringify(datas));
    } else {
        var items = [];
        items = JSON.parse(localStorage.getItem('names'))
        items.push(datas);
        localStorage.setItem('names',JSON.stringify(items));
    }
}

推送时localStorage ReactJ不起作用

2 个答案: