[英]How to store multiple set of data in local storage in reactjs?
我有一个名为“Post.js”的页面,我想在其中单击“添加收藏夹”按钮并将数据保存到本地存储中。 但是在每次新的点击中,数据都会被前一次替换,而不是添加新数据。
这是“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>
</>
);
}
您正在替换数据而不是将其附加到现有数据。 您应该首先检索旧数据。 然后合并新旧数据,然后将其保存在posts.js
的localStorage
中。
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>
))
}
...
这是关于渲染的问题。 试试这个钩子以呈现最新的 localStorage 数据而不是以前的数据: https://usehooks.com/useLocalStorage/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.