Javascript推送到本地存储阵列在React中不工作

在React中的onclick事件（不要以为React导致的问题，我认为这是我如何处理对象&数组），我试图抓住一个本地存储变量并将一个元素（键）推送到它，但是它会抛出错误'未捕获的TypeError：无法读取'null'的属性'ids'。Javascript推送到本地存储阵列在React中不工作

下面的代码：

import React from 'react'; 
import Images from './images'; 

export default React.createClass({ 
    getInitialState() { 
     // If doesn't exist, create empty instance 
     let selectedImages = localStorage.getItem('selectedImages') ? localStorage.getItem('selectedImages') : { ids : [] }; 

     return selectedImages; 
    }, 
    selectImage(key) { 
     // get localstorage 
     let selectedImages = localStorage.getItem('selectedImages'); 

     // Create instance of ids array and push key 
     let selectedImagesArray = selectedImages.ids.push(key); 
     // set .ids as selectedImagesArray 
     selectedImages.ids = selectedImagesArray; 

     // Set new local storage 
     localStorage.setItem('selectedImages', selectedImages); 

    }, 
    render() { 
     let selectedImages = localStorage.getItem('selectedImages'); 
     return (
      <Images items={feedData.items} 
        selected={selectedImages} 
        selectImage={this.selectImage} /> 
     ) 
    } 
});

来源

2016-04-27 DorianHuxley

看起来像'localStorage.getItem（'selectedImages'）;''返回'null'，所以当然''ids'不能从'null'访问。另外，你知道'push'返回数组长度的权利？不是真正的阵列。 – azium

'localStorage'只能保存字符串..你必须JSON序列化 – Matt

好像你的应用有以下流程（考虑空的localStorage）：

getInitialState：回报{ ids : [] }但设置没什么localStorage的
render：渲染你的组件。在点击进入下一步骤
selectImage：let selectedImages = localStorage.getItem('selectedImages');注重的是selectedImages是null因为你还没有设置为localStorage的任何事情
selectImage：let selectedImagesArray = selectedImages.ids.push(key);抛出你的错误“遗漏的类型错误：无法读取null属性的'id'。“

并注意@ Matt的评论。将对象设置为localStorage意味着设置字符串"[object Object]"，您必须在设置它之前序列化数据（JSON.stringify）并在获取它之后反序列化（JSON.parse）。

来源

2016-04-27 21:25:22

Javascript推送到本地存储阵列在React中不工作

回答

相关问题