问题是我试图将 prop 用作 useState 的初始状态，它来自商店和页面刷新后异步获取，这个 prop 是未定义的，我如何在调用之前加载 props，请检查下面的代码。
逻辑：第一次通过 redux 来自商店的道具我重定向到这个页面，页面刷新后一切正常，我收到了我在下面发送的错误。
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>
);
};
