反應異步和鈎子

Question

問題是我試圖將 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">&euro;{offer.price}</b>
                    <span className="property__price-text">&nbsp;night</span>
                  </div>
                  <div className="property__inside">
                    <h2 className="property__inside-title">What&apos;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 刷新后出現錯誤

Answer 1

問題可能是道具offer 。 您可以嘗試通過控制來自offer的is_favorite添加默認is_favorite 。 你可以做這樣的事情

useState((offer.is_favorite !== undefined ) ? offer.is_favorite:"default_is_favorite");