localStorage 在刷新时使用初始状态值进行更新答案

【问题标题】：localStorage getting updated with initial state value on refreshlocalStorage 在刷新时使用初始状态值进行更新
【发布时间】：2020-11-01 03:28:45
【问题描述】：

我正在尝试使用 localStorage 在刷新时保持组件的状态。该组件在页面的初始渲染时工作正常，但该组件失败并显示消息：TypeError: items.map is not a function

TestLocalStorage
src/TestLocalStorage.jsx:54

代码如下：

import React, { useEffect, useState } from 'react';

function TestLocalStorage() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const storedData = localStorage.getItem("items");
        if(!storedData) {
            Axios.get('/url').then(response => {
                const serviceResponse = response.data.hits.map(obj=> ({ ...obj, voteCount: 0 
           }));
                localStorage.setItem("items", JSON.stringify(serviceResponse));
                setItems(serviceResponse);
            });
        } else {
            setItems(storedData);
        }
    }, []);

    useEffect(() => {
        localStorage.setItem("items", JSON.stringify(items));
    })

    function increment(id) {
        const elementsIndex = items.findIndex(element => element.objectID === id )
        items[elementsIndex].voteCount++;
        setItems([...items]);
    }

    return (
        <table cellPadding="0" cellSpacing="0" width="100%" background-color="#f6f6ef">
         <tr>
            <td>
               <table border="0" cellPadding="0" cellSpacing="0" width="100%">
                    <tr bgcolor="#ff6600" style={{ color:"white", fontWeight: "bold" }}>
                        <td> Comments </td>
                        <td> Vote Count</td>
                        <td> vote</td>
                    </tr>
                    {
                        items.map((item) => {
                            return (
                            <tr className="table-rows" key={item.objectID}>
                                <td>{ item.comments }</td>
                                <td>{ item.voteCount }</td>
                                <td>
                                    <div 
                                        style={{ 
                                            width: 0, 
                                            height: 0, 
                                            borderTop: 0, 
                                            borderLeft: "5px solid transparent", 
                                            borderRight: "5px solid transparent", 
                                            borderBottom: "10px solid grey" 
                                        }}
                                        onClick={() => increment(item.objectID)} 
                                    />
                                </td>
                                <td>{ item.title }</td>
                            </tr>)
                        })
                    }
               </table>
            </td>
         </tr>
      </table>
    );
}
export default TestLocalStorage;

但我注意到，在第二次渲染时，localStorage 设置了初始值 [] 而不是新更新的值。不知道我哪里出错了。请帮忙

【问题讨论】：

这个 useEffect 有什么用？ useEffect(() => { localStorage.setItem("items", JSON.stringify(items)); }) 当你已经有一个 useEffect 钩子时！
当您从 localStorage 获取数据时，您应该在设置状态之前使用 JSON.parse() 对其进行解析。
@HarmandeepSinghKalsi 第一个钩子在初始挂载上。第二个钩子是每次更新
是的，成功了。谢谢

标签： javascript reactjs react-hooks local-storage use-effect

【解决方案1】：

使用 JSON.parse() 对从本地存储中提取的字符串进行解析

function TestLocalStorage() {

        const [items, setItems] = useState([]);
    
        useEffect(() => {
            const storedData = localStorage.getItem("items");
            if(!storedData) {
                Axios.get('/url').then(response => {
                    const serviceResponse = response.data.hits.map(obj=> ({ ...obj, voteCount: 0 
               }));
                    localStorage.setItem("items", JSON.stringify(serviceResponse));
                    setItems(serviceResponse);
                });
            } else {
                setItems(storedData);
            }
        }, []);

        ...............
        ...............
        ...............

}

修改您的函数，如下所示。另外，在对数组进行映射操作之前检查项目值，以防止未捕获的异常

function TestLocalStorage() {

        const [items, setItems] = useState([]);
    
        useEffect(() => {
            const storedData = JSON.parse(localStorage.getItem("items"));
            if(!storedData) {
                Axios.get('/url').then(response => {
                    const serviceResponse = response.data.hits.map(obj=> ({ ...obj, voteCount: 0 
               }));
                    localStorage.setItem("items", JSON.stringify(serviceResponse));
                    setItems(serviceResponse);
                });
            } else {
                setItems(storedData);
            }
        }, []);

        ...............
        ...............
        ...............
        return (
           .....
           .....
           items && items.map((item) => {
           .....
           .....
        )
}

【讨论】：

【解决方案2】：

storedData 将是字符串，您需要JSON.parse(storedData) 才能使用它并对其执行map

【讨论】：