如何将多组数据存储在reactjs的本地存储中？

Question

我有一个名为“Post.js"的页面，在该页面中，我希望单击”Add“按钮并将数据保存到本地存储中。但是在每一次新的点击中，数据都会被前一次替换，而不是添加新的数据。

这里是"Post.js"

const Posts = ({ posts, loading }) => {
    const click = (id, name, bio, link) => {
        //setButtonText(text);
        const obj = {
            id: id,
            name: name,
            bio: bio,
            link: link,
        };
        localStorage.setItem('items', JSON.stringify({ ...obj }));
    };

    if (loading) {
        return <h2>Loading...</h2>;
    }
    return (
        <div className="fav-content">
            <ul className="card">
                {posts.map((item, index) => {
                    console.log(item._id);
                    return (
                        <li key={item._id}>
                            <button
                                onClick={() => click(item._id, item.name, item.bio, item.link)}
                            >
                                Add Favt
                            </button>
                            <Card style={{ width: '18rem' }}>
                                <Card.Body>
                                    <Card.Title>Name: {item.name}</Card.Title>
                                    <Card.Text>Bio: {item.bio}</Card.Text>
                                    <Card.Text>Link: {item.link}</Card.Text>
                                </Card.Body>
                            </Card>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

我想从本地存储中获取保存的数据到"Favauth“文件中。

这里是"Favauth.js"

function FavAuthor() {
    const [data, setItems] = useState([]);
    useEffect(() => {
        const localStorageItems = JSON.parse(localStorage.getItem('items'));
        console.log(localStorageItems);
        if (localStorageItems) {
            setItems(localStorageItems);
        }
    }, []);
    return (
        <>
            <div className="fav-content">
                <ul className="card">
                    <li key={data.id}>
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Name: {data.name}</Card.Title>
                                <Card.Text>Bio: {data.bio}</Card.Text>
                                <Card.Text>Link: {data.link}</Card.Text>
                            </Card.Body>
                        </Card>
                    </li>
                </ul>
            </div>
        </>
    );
}

Answer 1

您正在替换数据，而不是将其附加到现有的数据中。您应该首先检索旧数据。然后合并新数据和旧数据，然后将其保存在localStorage中的posts.js中。

let oldData = JSON.parse(localStorage.getItem('items'))
localStorage.setItem('items', JSON.stringify([ ...oldData, ...obj ]));

然后在FavAuth.js中，您应该循环遍历localStorage中的项。

...
{data.map(post => (
    <li key={post.id}>
       <Card style={{ width: '18rem' }}>                            
         <Card.Body>
                                    
            <Card.Title>Name: {post.name}</Card.Title>
                                    
            <Card.Text>Bio: {post.bio}</Card.Text>                               
            <Card.Text>Link: {post.link}</Card.Text>
                                
         </Card.Body>
       </Card>
 </li>
))
}
...

Answer 2

这是渲染的问题。尝试这个钩子以呈现最新的localStorage数据，而不是上一个数据：https://usehooks.com/useLocalStorage/