[英]React async and hooks
the problem is that iam trying to use prop as initialstate for useState, which comes asynchronously from store and after page refresh iam getting, that this prop is undefined, how can i load props before call, check my code below.问题是我试图将 prop 用作 useState 的初始状态,它来自商店和页面刷新后异步获取,这个 prop 是未定义的,我如何在调用之前加载 props,请检查下面的代码。
logic: prop in coming from store through redux for first time i redirect to this page everything works after page refresh iam getting error which i sent below.逻辑:第一次通过 redux 来自商店的道具我重定向到此页面,页面刷新后一切正常,我收到了我在下面发送的错误。
ps i hide imports and connect func from snippet for less code. ps 我隐藏导入并从代码片段连接 func 以减少代码。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const PropertyComponent = (props) => {
const {
offer,
icons,
activeOffer,
onOfferCardHover,
onOfferCardLeave,
history,
setBookmarkStatus,
} = props;
const onUserNameClick = () => history.push(`/favorites`);
const [status, setStatus] = useState(offer.is_favorite);
const bookmarkHandler = () => {
setStatus(Number(!status));
setBookmarkStatus(offer.id, Number(!status));
};
const bookmarkClass = cn(`property__bookmark-button button `, {
'property__bookmark-button--active': status
});
return (
<div className="page">
<Header onUserNameClick={onUserNameClick} />
{!offer && (
<h1 className="property__name">
<Loader type="ThreeDots" color="#4873FA" height={200} width={200} />
</h1>
)}
{offer && (
<section className="property">
<div className="property__gallery-container container">
<div className="property__gallery">
{offer.images.map((image, index) => {
return (
<div className="property__image-wrapper" key={index}>
<img
className="property__image"
src={image}
alt="Photo studio"
/>
</div>
);
})}
</div>
</div>
<div className="property__container container">
<div className="property__wrapper">
{offer.is_premium && (
<div className="property__mark">
<span>Premium</span>
</div>
)}
<div className="property__name-wrapper">
<h1 className="property__name">{offer.title}</h1>
<button
className={bookmarkClass}
type="button"
onClick={bookmarkHandler}
>
<svg
className="property__bookmark-icon"
width="31"
height="33"
>
<use xlinkHref="#icon-bookmark" />
</svg>
<span className="visually-hidden">To bookmarks</span>
</button>
</div>
<div className="property__rating rating">
<div className="property__stars rating__stars">
<span style={{width: `${offer.rating * 20}%`}} />
<span className="visually-hidden">Rating</span>
</div>
<span className="property__rating-value rating__value">
{offer.rating}
</span>
</div>
<ul className="property__features">
<li className="property__feature property__feature--entire">
{offer.type}
</li>
<li className="property__feature property__feature--bedrooms">
{offer.bedrooms} Bedrooms
</li>
<li className="property__feature property__feature--adults">
Max {offer.max_adults} adults
</li>
</ul>
<div className="property__price">
<b className="property__price-value">€{offer.price}</b>
<span className="property__price-text"> night</span>
</div>
<div className="property__inside">
<h2 className="property__inside-title">What's inside</h2>
<ul className="property__inside-list">
{offer.goods.map((feature, index) => {
return (
<li className="property__inside-item" key={index}>
{feature}
</li>
);
})}
</ul>
</div>
<div className="property__host">
<h2 className="property__host-title">Meet the host</h2>
<div className="property__host-user user">
<div className="property__avatar-wrapper property__avatar-wrapper--pro user__avatar-wrapper">
<img
className="property__avatar user__avatar"
src={offer.host.avatar_url}
width="74"
height="74"
alt="Host avatar"
/>
</div>
<span className="property__user-name">{offer.host.name}</span>
</div>
<div className="property__description">
<p className="property__text">
A quiet cozy and picturesque that hides behind a a river by
the unique lightness of Amsterdam. The building is green and
from 18th century.
</p>
<p className="property__text">
An independent House, strategically located between Rembrand
Square and National Opera, but where the bustle of the city
comes to rest in this alley flowery and colorful.
</p>
</div>
</div>
<section className="property__reviews reviews">
<ReviewList offerId={offer.id} />
<ReviewForm offerId={offer.id}/>
</section>
</div>
</div>
<section className="property__map map" style={{padding: `0 15rem`}}>
{<Map icons={icons} activeIconId={activeOffer} />}
</section>
</section>
)}
{offer && (
<NearPlaces
offerId={offer.id}
onOfferCardHover={onOfferCardHover}
onOfferCardLeave={onOfferCardLeave}
/>
)}
{offer && <Footer />}
</div>
);
};
mainPage here iam getting error after refesh mainPage 刷新后出现错误
Problem may be the prop offer
.问题可能是道具
offer
。 You may try adding default is_favorite
by controlling the is_favorite
from the offer
.您可以尝试通过控制来自
offer
的is_favorite
添加默认is_favorite
。 You can do such thing你可以做这样的事情
useState((offer.is_favorite !== undefined ) ? offer.is_favorite:"default_is_favorite");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.