React-ログイングローバル管理

10530 ワード
テキストリンク

💜 localStorageとuseState Hookによるログイングローバル管理


[金宝允]

  • ローカルストレージとユーザ状態ホストを使用してログイングローバル管理
    • を行う.
  • 実実施
  • で記述されたコード
  • fetch関数を用いる所望リストとカート商品リストからデータ
    • を検索する.
  • userEffectでこの関数を実行し、依存配列にステータス値を入れて、値の変更時に再レンダリングします.
    const [wishList, setWishList] = useState(0);
const [myBagList, setMyBagList] = useState(0);

  useEffect(() => {
    fetch(`${BASE_URL}/users/wishlist`, {
      headers: { Authorization: localStorage.getItem('token') },
    })
      .then(res => res.json())
      .then(data => setWishList(data.wish_list));
  }, [wishList]);

  useEffect(() => {
    fetch(`${BASE_URL}/carts`, {
      headers: { Authorization: localStorage.getItem('token') },
    })
      .then(res => res.json())
      .then(data => setMyBagList(data.carts));
  }, [myBagList]);
  • データベースから送信ユーザ名をlocalStorageに保存し、変数に挿入して条件レンダリング
    • を実行する.
    const userName = localStorage.getItem('first_name');

<button className="navBtn" onClick={openModal}>
  {userName ? `${userName}님, 반가워요!` : 'Sign in | Sign Up'}
</button>
<button className="navBtn">
  {userName ? `My Wish List(${wishList.length})` : 'My Wish List'}
</button>
<button className="navBtn">
  {userName ? `My Bag(${myBagList.length})` : 'My Bag'}
</button>
    フォーマット日は2013-08-29 02:47:03の形式で表示されます.
    0408ビット数の追加