HTTP Cookie という用語は、フォーチュン Cookie から生まれた造語です。フォーチュン クッキーは、京都の 19 世紀にまでさかのぼります。これらの Cookie の内部には、特別なメッセージが埋め込まれています。Web 開発者のLou Montulliは、このアイデアと、Unix システムで使用されている方法を使用して、小さなデータ ファイルをあるプログラムから別のプログラムに変更せずに送信し、HTTP Cookie を発明しました。

このチュートリアルでは、JavaScript を使用した HTTP Cookie と、Cookie の設定と取得を試みるマウス ゲームをどのように実行したかについて説明します。

問題文

を含むコールバック関数を使用した get リクエストがありますaccessToken。accessToken次に、生成された を使用してユーザー情報を取得したいと思います。これはフェッチ リクエストで行われます。

callback: (response) => {
      // run fetch request to get user info
      let value = fetch(url + response.access_token, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
      })
        .then(value => value.json())
        .then(text => console.log(text))
    }

.then(text => return text)

function callme() {
  callback: (response) => {
      ...
    }
}

let userinfo = callme();

ソリューション バニラ クッキー

私の頭に浮かんだ最初の解決策は、値を Cookie として保存することです。このようにして、必要なときにいつでも Cookie の値を取得するだけで済みます。

.then(text => document.cookie = "userinfo=" + JSON.stringify({ username: text.name, userimg: text.picture }))

let userinfo = document.cookie

登録された Cookie を別のページから取得する必要があるため、これが大きな問題になりました。バニラの JavaScript でビルドしていた場合、ウィンドウのリロード機能でこれを修正できたはずです。

window.location.reload()

ソリューション反応クッキー

解決策を探す中で、完璧なReact cookie ライブラリを見つけました。指示に従って、私はこれにたどり着きました：

(Pageone.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pageone() {
  const [setCookie] = useCookies(["user"]);

  function myCookie() {
    setCookie("user", "blah", {
      path: "/"
    });
  }
  return (
    <button onClick={myCookie()}>Set Cookie</button>
  );
}
(Pagetwo.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pagetwo() {
  const [cookies] = useCookies(["user"]);

  return (
    <div className="Pagetwo">
      <h1>React cookies</h1>
       {cookies.user && <p>{cookies.user}</p>}
      <button onClick={myCookie()}>Set Cookie</button>
    </div>
  );
}

レスキューに反応する状態

デザイン フローの実装には、ユーザー情報の取得、保存、および保存された情報を含む新しいページへの移動が含まれます。を使用React useNavigateすると、ナビゲート中にユーザー情報を状態に保存できます。

.then(text => navigate('/', { state:{username:text.name, userimg:text.picture}}))

import { useLocation } from 'react-router-dom';

const Sidebar = () => {
  const location = useLocation();
  // retrieve userimg
  let userimg = location.state.userimg;
  // retrieve username
  let username = location.state.username;
}

React ステートを使用して、いたちごっこの追跡を正常に終了させました。この記事では、React コンポーネント間で情報を渡す方法を調べました。最初に、標準の JavaScript Cookie を調査しました。次に、React Cookie ライブラリを使用し、最後に React 状態を使用しました。