Question

在React中的onclick事件中（不要认为React引起了问题，我认为这是我处理对象和数组的方式），我正在尝试获取本地存储变量并推送一个元素（key ）它，但它正在抛出错误'未捕获的TypeError：无法读取null的属性'ids'。

以下是代码：

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

Answer 1

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

getInitialState：返回{ ids : [] }但未向localStorage设置任何内容
渲染：渲染您的组件。点击进入下一步
selectImage： let selectedImages = localStorage.getItem('selectedImages');请注意selectedImages是null因为您还没有设置localStorage
selectImage： let selectedImagesArray = selectedImages.ids.push(key);会引发您的错误“Uncaught TypeError：无法读取null的属性'ID。”

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

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

1 个答案: