0203 TIL(POST、Redirection、検索機能)

POST機能の追加

export const useFetch = (url, method = "GET") => {
...

まず、custom hook useFetchにメソッドパラメータを追加し、初期値をGETに設定します.
なぜGET?
次に、パブリッシュするデータに次の関数を作成します.

const postData = (postData) => {
    setOptions({
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(postData),
    });
  };

1)方法:POSTを処理するために作成されるので、方法はPOSTである.
2)Headers:次のHeadersは、受信するコンテンツのタイプを記録します.この方面は更に学ぶ必要があります!
3)body:JavaScriptオブジェクトをJSONに変換するために、JSONで渡されたPostDataをJSONの文字列形式に変換します.細い縄で包んだ.

メソッドタイプに注意!

また、次の関数も追加され、次の方法のタイプに従って2つの方向で実行できます.

   if (method === "GET") {
      fetchData();
    }
    if (method === "POST" && options) {
      fetchData(options);
    }

したがってGETであればすぐにfetchDataを実行し、オプションがあればオプションに従って実行することができます.

createに追加

import { useFetch } from "../../hooks/useFetch";

  const { postData, data, error } = useFetch(
    "http://localhost:3000/recipes",
    "POST"
  );

上に作成したhookをロードし、下に返される値に{postData,data,error}を使用してPOSTのデータを設定し、handleSubmit内に次のようなデータフォーマットを追加します.

postData({
      title,
      ingredients,
      method,
      cookingTime: cookingTime + " minutes",
    });

Redirection

ではsubmitなら、直接ホームページに戻してもらえますか?まず考えたいのはuseHistoryのアイデアを書くことです

import { useHistory } from "react-router-dom";

const history = useHistory();

🍔햄버거 & 🍟감튀 같은 조합!
import 해보고 const 해주기

また、データが変更されるたびにリダイレクトが発生します.この場合、useEffectを考慮する必要があります.

  useEffect(() => {
    if (data) {
      history.push("/");
    }
  }, [data]); //useFetch로 받아온 data가 변경될 때마다 추가적으로 실행

直読すると、最初の構成部品の運転時に1回実行されます.データが変更されると、内部関数が自動的に実行されるのでhistory.Push("/")、ホームページに戻ります.

検索機能の作成

(1)SearchBarの実施

検索機能を作成!まずrfcㄱ!
次に、検索語を受信するために用語とsetTermを作成します.

const [term, setTerm] = useState("");

  <div className="searchBar">
      <form onSubmit={handleSubmit}>
        <label htmlFor="search"> 검색: </label>
        <input
          type="text"
          id="search"
          onChange={(e) => setTerm(e.target.value)}
          required
        />
      </form>
    </div>

また,生成する素子のコア内容はこの部分である.受信textを書き込み、labelとinputidを検索し、最後にクエリが変化したときにe.targetを受信します.valueをsetTermとします.

const handleSubmit = (e) => {
    e.preventDefault();

    history.push(`/search?query=${term}`);
    // search로 가게끔 만들어준다.
  };

上のようにPreventDefaultで基本動作を止めるポイントは./search?query=${term}この部分です.だから検索すると.

こんなところにつながっています.

いいえ.検索という言葉しか出てこない.また,search内部の動作も体現する.
学習:
RedirectのようにUXの部分も!小さな部分ですが、完成度を上げるためには、やはり心を込めてやりましょう!
さらに学習する必要がある部分:
なぜGETは初期値なのでしょうか?

は以下の部分を理解できません.これで持って来ればいいですか?

  const { postData, data, error } = useFetch(
    "http://localhost:3000/recipes",
    "POST"
  );