Draft-jsで「Uncaught TypeError: Cannot read property 'getIn' of undefined」というエラーの解決方法

Draft-jsは、Reactでリッチテキストエディタを構築するためのフレームワークです。しかし、初期設定時に「Uncaught TypeError: Cannot read property ‘getIn’ of undefined」というエラーが発生することがあります。この記事では、そのエラーの対策方法を詳しく解説します。

エラーが発生する原因

以下のコードを見てみましょう。

import React, { useEffect, useState } from 'react';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';

function MyEditor() {
　　　　const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div className="editor">
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
}

export default MyEditor;

このエラーの原因は、コンポーネントのレンダリングが完了する前に Editor コンポーネントが editorState を必要とするためです。Reactのレンダリングサイクルと useState の非同期的な特性により、初期レンダリング時には editorState が未定義になる可能性があります。

解決策

解決策としては、editorState が定義されているかどうかをチェックしてから Editor コンポーネントをレンダリングすることです。また、useState での初期化ではなく、useEffect フック内で EditorState.createEmpty() を呼び出す方法が推奨されます。これにより、コンポーネントのマウント後に状態が設定され、エラーを防ぐことができます。

以下は修正後のコードです。

import React, { useEffect, useState } from 'react';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';

function MyEditor() {
  const [editorState, setEditorState] = useState<EditorState>();

  useEffect(() => {
    setEditorState(EditorState.createEmpty());
  }, []);

  return (
    <div className="editor">
      {editorState && (
        <Editor editorState={editorState} onChange={setEditorState} />
      )}
    </div>
  );
}

export default MyEditor;

まとめ

EditorState.createEmpty() を非同期に設定することで、エラーを回避しつつ、Draft-jsを安全に使用できます。