Javascript 推送到本地存储阵列在 React 中不起作用答案

【问题标题】：Javascript push to local storage array not working in ReactJavascript 推送到本地存储阵列在 React 中不起作用
【发布时间】：2016-04-28 05:25:22
【问题描述】：

在 React 中的 onclick 事件上（不要认为 React 会导致问题，我认为这是我处理对象和数组的方式），我正在尝试获取本地存储变量并推送元素（键）到它，但是它抛出错误 'Uncaught TypeError: Cannot read property 'ids' of null.'

代码如下：

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} />
        )
    }
});

【问题讨论】：

看起来localStorage.getItem('selectedImages'); 正在返回null 所以当然ids 不能从null 访问。另外，您知道push 返回数组长度对吗？不是实际的数组。
localStorage 只能保存字符串.. 你必须 JSON 序列化

标签： javascript reactjs

【解决方案1】：

您的应用似乎有以下流程（考虑为空的 localStorage）：

getInitialState: 返回 { ids : [] }，但没有设置 localStorage
渲染：渲染您的组件。点击进入下一步
selectImage:let selectedImages = localStorage.getItem('selectedImages'); 注意selectedImages 是null 因为你还没有设置localStorage 任何东西
selectImage: let selectedImagesArray = selectedImages.ids.push(key); 抛出错误“Uncaught TypeError: Cannot read property 'ids' of null.”

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

【讨论】：