React.js:エラー this.setState is not a function

Kuniyoshi Takemoto

8年前

This post is also available in: English-US (英語)

本記事は、React.js でテキストボックスの値の変更を state で扱いたい時に以下のようなエラーが出た場合のメモです。
他にも色々なエラーの原因が考えられるので、数あるうちのひとつとして参考程度にしていただければと思います。
ちなみに、下記のサンプルコードにおいて、UIは Material UI を使っています。

Uncaught TypeError: this.setState is not a function

下記の例のように onChangeText(e) 関数で変更されたテキストの値をstateに適用しようとしたら、以下例の　5行目のコードのように bind(this) とする必要があります。
javascriptの bind 関数を使って this を束縛します。
constructor　で　bind(this)　としておかないと return文の文脈での　this が指定されません。
特に、React.jsではbind(this)を使う場面が多いです。

export class Addkeyword extends React.Component {

    constructor(props) {
        super(props);
        this.state = {value: null};

        this.onChangeText = this.onChangeText.bind(this);
    }


    onChangeText(e) {
        this.setState({value: e.target.value});
    }

    render() {
        return (
             <div>
             <TextField hintText="Message Field"
             floatingLabelText="MultiLine and FloatingLabel"
             value={this.state.value}
             onChange={this.onChangeText}
             multiLine={true}
             rows={2} />

            </div>
    );
  }
}

Tags: React.js