React完全ガイド ~問題への対処法~

参考教材

問題への対処法

エラーの解消方法

赤波線

文法の書き方ミス

// 修正
return (
    <>
      <p>現在のカウント数: {count}</p>
      <button onClick={countUp}>+</button>
    </>

  );

---

定義されていない

// 修正
import { useState  } from "react";

const Example = () => {
  const [count, setCount] = useState({ val: 0 });

エラーはないけど動かない

コードのデバック

コードを止めてその状態の変数の中身や、渡されている値が正しいかを確認する作業

---

①ボタンは問題なく動いているか？

<button onClick={countUp}>+</button>

const countUp = () => {
    console.log('ボタンが押されました');
};

---

②ボタンの機能も正常に動いているか？

const countUp = () => {

  setCount((prevstate) => {
  console.log('コールバックON');

  // valの初期値は0 +1
  prevstate.val += 1;
  console.log(prevstate);
      
  return prevstate;
  });
};

---

③再レンダリングされているか？

const Example = () => {
  const [count, setCount] = useState({ val: 0 });

  console.log('再レンダリングしてる?');
};

この結果から分かるのは、中のオブジェクトの結果は変わっているが画面が変わっていないので、再レンダリングされていないのが分かる。

---

修正する

エラーや不具合の原因をgoogleやAIに聞いて修正する

// 修正
const countUp = () => {

  setCount((prevstate) => {

    // objが渡ってきたら、新しいobjにコピーしてreturnする
    const newState = { ...prevstate }
    
    newState.val += 1;
    return newState;
    });
  };

デバッカーを使ってみよう

デバックとはコードを１行１行確認しながら実行すること
デバッカーを使うことで、その部分でデバックを一時停止できる

現在の問題点を見つける

①現在のカウント数の数字が出ない

const Child = (countNum) => {
  
  // 確認したい箇所の上でdebuggerを置く
  debugger

  // 本来数字が表示される箇所を見つける
  return <p>現在のカウント数: {countNum.val}</p>
}

{countNum.val}　が undefined と出ている
これは、Childコンポーネントの関数が実行中の countNum.val　の値が　undefined となっているので、画面上に表示されなかった

---

countNumをコンソールで確認しよう

// ①propsの分割代入は({})で囲わないといけない
// ②数字を受け取っているのはcountNumではなくcountである
const Child = ({count}) => {
  debugger
  return <p>現在のカウント数: {count.val}</p>
}