【React】TypeError: ＊＊ is not a function

Question

Reactでのエラー

reactでTodoリストを作っています。入力した内容がリストで表示されます。

実現したい事としてはこの通りです。
inputタグ内で入力した内容がhandleChangeメソッドによりstateのinputに更新されます。

そして送信ボタンを押したら、handleSubmitメソッドによりstate.inputの内容がtoDoList(配列)に入れられます。

もしtoDoListに要素が一つでもあるなら、それをリストとしてレンダリングします。

###起こった問題

しかし、送信ボタンを押すと二つの問題が発生しました。

まず、フォームに入力して「追加」ボタンを「一度」押すとリストが消えてしまうことです。

cccと入力してボタンを押してみました。

次にこの状態でもう一度ボタンを押すと次のエラーが発生しました。

以下がhandleSubmitメソッド内で起こったエラーです。

エラーメッセージ

TypeError: Todo.push is not a function

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';

class Todo extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     input: '',
     toDoList: ["aaa", "bbb"],
   }
 }


 handleSubmit(e) {
  e.preventDefault();
  const input = this.state.input;
  const Todo = this.state.toDoList;
  this.setState({
    toDoList: Todo.push(input),
  });
 }


 handleChange(event) {
   const input = event.target.value;
   this.setState({
     input: input,
   });
 }

  render(){
    var toDoList;
    if (this.state.toDoList.length > 1) {
      toDoList = this.state.toDoList.map((list) => {
        return (
          <li>{list}</li>
        );
      });
    }

    return(
    <div className="container">
      <div className="Todo">Todoリスト</div>
      <ul>
        {toDoList}
      </ul>
      <form onSubmit={(e) => this.handleSubmit(e)}>
        <input type="text" onChange={(event) => this.handleChange(event)}/>
        <input type="submit" value="追加"/>
      </form>

    </div>
    )
  }
}

ReactDOM.render(
  <Todo />,
  document.getElementById('root')
);

試したこと

toDoListは配列であることを確かめるために試しに"aaa","bbb"という文字列を入れてみました。するとこれは正しく表示されました。renderメソッド内ではtoDoList.mapが動いているようです。

stateの定義の仕方が悪いのかと思った時はstate: new Arrayにしてみましたが解決しませんでした。

handleSubmit内でstate.toDoListを変数に代入する際、sliceメソッドで使ってみましたがすぐに的外れであることがわかりました。

this.state.toDoListは確かに配列で、pushメソッドも問題なく使えるはずなのですが・・・

Answer 1

こんにちは

以下は MDN の push メソッドの説明 からの引用です。

push() メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

上記のとおり、 push メソッドは、要素が追加された後の配列の長さを返します。なので、ご質問のコードだと、１回目の「追加」ボタンをクリックしたのときの

this.setState({
    toDoList: Todo.push(input),
  });

によって、 this.state.toDoList には、１つ要素の追加された配列の長さが入るので、 3 という数値が設定されます。
そのため、 render の以下の部分

 if (this.state.toDoList.length > 1) {

で、 this.state.toDoList.length は undefined になり、 if が判定する条件は false になって、 <ul> の中身が作られないために、画面上では、既存のリストアイテムも消えてしまいます。

さらに続けて「追加」ボタンをクリックしたときは、

const Todo = this.state.toDoList;

によって const Todo には 3 という数値が入ってきて、

Todo.push(input)

を実行しようとしますが、3という数値にはpushというメソッドはないので、

TypeError: Todo.push is not a function

というエラーになります。
修正の方法ですが、新しい this.state.toDoList を setState する箇所の

修正前：

toDoList: Todo.push(input),

を、たとえば以下のように修正します。

修正後：

toDoList: [...Todo, input],

上記の一行の修正で、とりあえずは意図通り動くようになると思います。

さらに、ちょっとリファクタさせて頂けるならば、this.state.toDoList のほうも、同じ名前の toDoList という変数に入れるようにすれば、分割代入を使って以下のように書けます。

  handleSubmit(e) {
    e.preventDefault();
    const { input, toDoList } = this.state;
    this.setState({
      toDoList: [...toDoList, input],
    });
  }

あるいは、一時的な変数に入れないで、以下のようにも書けます。

  handleSubmit(e) {
    e.preventDefault();
    this.setState({
      toDoList: [
        ...this.state.toDoList,
        this.state.input
      ],
    });
  }

上記のように、 this.setState するときに、既存の state の何らかのプロパティの配列に追加したり、あるいはstateのあるプロパティはオブジェクトで、それのあるプロパティだけを変えたりするときに、スプレッド構文 ... はよく使われます。

以上参考になれば幸いです。

Comments

[southernX]

解決しました！
jsでのpushは数値を返すのですね。代わりにスプレッド構文で配列を更新することも初めて知りました。勉強になりました。
スッキリしました。丁寧な回答ありがとうございます。

[jun68ykt]

どういたしまして。 解決されたとのことで、よかったです ????

Answer 2

クラス名と変数名がかぶってるからじゃないですかね？

---

追記
これ

class Todo extends React.Component {

と

  const Todo = this.state.toDoList;

これ

Comments

[gentaro]

あぁ、ぱっと見てアレ？と思ったんですが、ハズレでしたか。
まぁ一般的によろしくない事なので、名前は変えたほうがいいっすよ。