[react]useEffectをレンダリングできない場合&演算子を使用-!

5589 ワード
テキストリンク
今回のkidsneyプロジェクトで一番親しいuseEffect^
私はUseEffectについてよく知らないと思いますが、ちょっと疲れたやつ(?)
子供のプロジェクトで最も難しい部分は、「好き」をクリックして状態を維持することです.(リフレッシュしても)

データ通信は全く問題なく、useEffectを利用して素子マウント時にハートの状態を保存し、ハート部分で条件付きレンダリングを行い、全く役に立たない.
確認すると、クリックしたHeartをUserEffectに保存しても、UserEffectはトランザクションを非同期で処理するため、レンダリングが完了した後にfetchが行われます.
私がこの問題を解決する方法を話してください.
コアは&&演算子です!

トラブルシューティングプロセス


注)商品リストを含む<productList/>およびリスト内の各商品は<product />である.
|
  • <productList/>内でfetchを使用してすべての所望リスト商品リストを送信する.
  • 受信後、mapを用いて当該商品id値のみからなる配列の形状をwishListIdsという状態値に保存する.
    • //productList
     const getWishList = () => {
    fetch(`http:/${API}/users/wishlist`, {
      headers: {
        Authorization:
          'localStorage.getItem(Token)',
      },
    })
      .then(res => {
        if (!res.ok) {
          console.log('error');
        }
        return res.json();
      })
      .then(data => {
        setWishListId(data.wish_list.map(list => list.id));
      })
      .catch(error => console.error(error.message));
  };
    次いで、wishListIdsがサブアセンブリ<product />を含むか否かを示す値(ブール値)をisHeartという変数にpropとして送信する.
    △つまりisHeartは、商品ごとに「いいね」がクリックされたかどうかを教えてくれます.
    true=Heartシェーディング済み)isHeart={wishListIds.includes(product.id)} 
     return (
   <div className="productList">
       {wishListIds.length > 0 &&
         products.map(product => (
           <Product
             wishListIds={wishListIdx}
             isHeart={wishListIdx.includes(product.id)}
             key={product.id}
             product={product}
           />
         ))}
    ここで注意すべき部分はwishListIds.length > 0 &&です.
    そこの&&演算子を書かないと、isHeartsの値は未定義の値として製品に送信されます.
    useEffectは非同期処理業務であるため、wishListIdsの値が受信されない前にレンダリングされるため、値を保存せずにpropsに格納される.
    だから、必ず&&演算子を使います!wishListIds値を受け取ってからpropsを渡すように書きます!
  • サブアセンブリ<product />からisHeartsを受信し、isAddStateの初期値として使用して、Heartをクリックしたかどうかを決定します.
    const Product = ({ product, direction, isHeart, wishListIds }) => {
 const { id, name, price, image_urls } = product;
 const [isAdded, setIsAdded] = useState(isHeart);
  • は、ユーザが再び「いいね」ボタンを押したときに状態を変更できるように、データを転送する関数を作成することもできる.(このボタンをonClickイベントとしてインプラント!)
    const addToWishList = () => {
  fetch(`${API}/users/wishlist?product-id=${id}`, {
    method: 'POST',
    headers: {
      Authorization: localStorage.getItem(Token),
    },
    body: JSON.stringify({ id: id }),
  })
    .then(res => {
      if (!res.ok) {
        console.log('error');
      }
      return res.json();
    })
    .then(data => {
      console.log(data);
      setIsAdded(data.message === 'ADDED');
    })
    .catch(error => console.error(error.message));
};
  • いいねボタンは、isAddedの値に基づいて色を塗る状態を変更する条件付きレンダリングを提供します.
    •     <button className="heartBtn" onClick={addToWishList}>
        <i className={isAdded ? 'fas fa-heart' : 'far fa-heart'} />
      </button>
    重要なポイントは次のとおりです.
    リフレッシュ時にハートビート状態を維持する場合は、&&演算子を使用してハートビート状態を保存する場合は、propを使用してサブエレメントにハートビート状態(ブール値)を送信し、受信したハートビート状態をstateの初期値に設定して維持する必要があります.
    非同期処理プロセスを理解しました.&&演算子を活用しましょう-!!
    [プログラマー]機能開発問題のJavaScriptアルゴリズム
    2.2..9静的同期synchronizedメソッドとsynchronized(class)コードブロック