Reactのよくあるエラーをデバッグする
key不足の警告、undefinedによるstateのバグ、ハイドレーションエラーを診断します
「Reactのよくあるエラーをデバッグする」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
Key の不足に関する警告
// Bad
items.map(item => <li>{item.name}</li>)
// Good
items.map(item => <li key={item.id}>{item.name}</li>)undefined のプロパティを読み取れない
// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;
// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;過剰な再レンダリングエラー
// Bad — setState called on every render
function Counter() {
const [n, setN] = useState(0);
setN(n + 1); // infinite loop!
return <p>{n}</p>;
}過剰な再レンダリングの修正
// Good — update only on click
function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}ハイドレーションの不一致に関する警告
ハイドレーションの不一致の修正
const [ts, setTs] = useState('');
useEffect(() => {
setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;State はすぐには更新されない
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
console.log(count); // still old value!
}
useEffect(() => {
console.log('updated:', count); // correct
}, [count]);Prop の変更時にコンポーネントが更新されない
// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);
// Good — new array reference
setList([...list, 'item']);エラーオーバーレイでエラーを読む
確認問題
まとめ
コース完了
よくある質問
「Reactのよくあるエラーをデバッグする」レッスンは無料ですか？
はい。「Reactのよくあるエラーをデバッグする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「Reactのよくあるエラーをデバッグする」で何を学びますか？
key不足の警告、undefinedによるstateのバグ、ハイドレーションエラーを診断します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Reactのよくあるエラーをデバッグする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- React DevToolsのインストールと起動
- コンポーネントツリーとPropsの調査
- Profilerタブを使う
- Reactのよくあるエラーをデバッグする