[英]How can I conditionally render this component based on whether or not there is data in localstorage?
I want MyList to render whatever is in localStorage (works great), however when there is nothing in local storage and I render the component, it renders empty.我希望 MyList 呈现 localStorage 中的任何内容(效果很好),但是当本地存储中没有任何内容并且我呈现组件时,它呈现为空。 I would like to have a placeholder there for when that occurs.当发生这种情况时,我想在那里有一个占位符。 How can I best do that?我怎样才能最好地做到这一点?
const MyList = ({setDrinks}) => {
const setMyList = () => {
let parsedData = JSON.parse(localStorage.getItem('favoriteDrinks'))
setDrinks(parsedData)
}
return (
<div>
<button className="my-list" onClick={setMyList}>My List</button>
</div>
)
}
export default MyList
You can assign a random placeholder if your localStorage
does not have data.如果您的localStorage
没有数据,您可以分配一个随机占位符。 Here's a minimal solution:这是一个最小的解决方案:
const MyList = ({setDrinks}) => {
const setMyList = () => {
const myDrinks = localStorage.getItem('favoriteDrinks');
if (!myDrinks) {
setDrinks({ message: "No drinks found!" });
return;
}
let parsedData = JSON.parse(myDrinks);
setDrinks(parsedData);
}
return (
<div>
<button className="my-list" onClick={setMyList}>My List</button>
</div>
)
}
export default MyList
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.