LoginSignup
shonsukee
@shonsukee

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

if文の二重判定

Q&A

Closed

React

前提

Reactでニュースアプリを作成しています．本文を取得し，画面に出力しようと考えています．しかし，同じページの情報を何度も取得するのはよろしくないと思い，ローカルストレージを使って保存しようと考えています．

発生している問題・エラー

    if (message !== "" && localStorage.getItem("sentence") === "") { // message, localStorageが空白の時
      fetchData(); // データ取得
	  localStorage.setItem("sentence", answer); // 取得したデータをローカルストレージに保存
    } else if(localStorage.getItem("sentence") !== null) { // localStorageがnullでないとき
		setAnswer(localStorage.getItem("sentence")); // answerをセット
	}

このとき

型 'string | null' の引数を型 'SetStateAction<string>' のパラメーターに割り当てることはできません。
  型 'null' を型 'SetStateAction<string>' に割り当てることはできません。

上記のエラーが出ますが，nullはelse ifではじいていると思います．
下記のコードのように2重でnullをはじくように書き換えるとエラーがなくなりました．

    if (message !== "" && localStorage.getItem("sentence") === "") {
      fetchData();
      localStorage.setItem("sentence", answer);
    } else if (localStorage.getItem("sentence") !== null) {
      let storedSentence = localStorage.getItem("sentence"); // 追加
      if (storedSentence) { // 追加
        setAnswer(storedSentence);
      }
    }

この違いを教えていただきたいです．．．

0

1Answer

uasi
@uasi

TypeScript の if 文は型を静的に（＝プログラムを実際に動かすことなく、コードの文面から分かる範囲だけで）解釈して絞り込みます。

ここで、 localStorage.getItem("sentence") を（あるいは一般的に言って何らかのメソッドを）2回続けて呼んだとき、同じ値が返るかどうかを静的に判断することはできません。よって else if (localStorage.getItem("sentence") !== null) と書いても、返り値型を絞り込むことはできません。

一方、変数の値はセットし直さない限り同じままなので、 if (storedSentence) の直後に setAnswer(storedSentence) が続けば storedSentence は null ではないと静的に判断できます。

つまり外側の if に null を弾く効果はなく、内側の if だけが効いているということです。

ちなみに、先に storedSentence を用意しておけば二重に if を書かずに済みます。

    const storedSentence = localStorage.getItem("sentence");
    if (message !== "" && storedSentence === "") {
      fetchData();
      localStorage.setItem("sentence", answer);
    } else if (storedSentence !== null) {
      setAnswer(storedSentence);
    }
3Like

Comments

  1. @shonsukee

    Questioner

    理解しました！

    if文の条件判定にlocalStorage.getItem("sentence") === nullを入れても判定されない理由も同時にわかりました．ありがとうございます！

Your answer might help someone💌

LoginSign Up