[TIL]完了単語章historypushを使用してデータを転送し、userEffectを使用します.

今日やっと単語帳ができました!かわいい😊

cssには自信がありませんでしたが、周囲の人に助けられ、無理に反応型を実現しました.メディアの照会が悪いのでgridを使いました.

body {
  background: linear-gradient(90deg, #fff 20px, transparent 1%) center,
    linear-gradient(#fff 20px, transparent 1%) center, #ff6f61;
  background-size: 22px 22px;
}

本来は背景が白いだけなので、ポイントグリッドを入れたいのですが、背景画像を先に使って、cssを使う方法があります!

<HiPencilAlt
                  className="edit"
                  size={20}
                  onClick={() => {
                    history.push({
                      pathname: "/edit/" + lists[index].id,
                      state: { list: lists[index] },
                    });
                  }}
                />

メイン画面で単語を変更するページに入るとhistory.pushでpathを指定し、stateにデータを一緒に転送できます.これらのデータを直接受信するので、useParamsでロードするよりも便利です.データを受信する場合は、次のコードのようにuseLocationをインポートする必要があります.

import { useLocation } from "react-router";

const Edit = (props) => {
  const history = useHistory();
  const ref = React.useRef([]);
  const dispatch = useDispatch();
  const location = useLocation();
  const lists = location.state.list;

  React.useEffect(() => {
    ref.current[0].value = lists.word;
    ref.current[1].value = lists.pron;
    ref.current[2].value = lists.meaning;
    ref.current[3].value = lists.eg;
  }, []);

単語ページを修正してデータを受信すると、最初から入力値をinputウィンドウに表示させようとして、ページを開いてコードを書いて保存したら、「よし!」と表示されます.別の単語をクリックするとタイプエラーが発生します.もとはref値は最初は空の配列で、userEffectを使わずにこのようにして、結果は値がなくて、結果は間違いました.useEffectを使用してマウントし、値を取得して正常に動作します.データストリームにうまく追いつくには、コードを書くのは難しい.でもだいたい先週のプロジェクトを思い出して、流れを考えてコードを書いたので、実現しやすい!😎✨