React.js mapのつかいかたについて。 教えて下さい！

Question

前提・実現したいこと

以下のサイトで紹介されているToDOアプリを作っています。
[参考記事]

React.jsでbuttonをクリックされたときに、入力内容をリストに追加するプログラムを実装中にエラーが起きました。

mapについてのエラーです。

発生している問題・エラーメッセージ

todos.map is not a function

該当のソースコード

コimport React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

const App = () =>{
  return<Todo />
}

class Todo extends Component{

  constructor(props){
    super(props);

    // thisの中にこういう数列をこういう初期値で用意しますよ
    this.state ={
      todos: [],
      name: ''
    };
  }

    addTodo = () => {
      const{todos,name}=this.state;
      this.setState({
        todos: {...todos,name}
      });
    }
    
  

render(){
  const {todos} = this.state;

  return (<div>
      <input type="text"  onInput={this.onInput}/>
      <button onClick={this.addTodo}>登録</button>
      <ul>
        {/* mapでリストに変換 */}
      {todos.map((todo,index) => <li key ={index}> {todo} </li> )}
    </ul>

  </div>);
}
}
export default App;

###　回答お願いいたします！
初心者で困っています。何が悪いのでしょうか、おしえてください！

Answer 1

      this.setState({
        todos: {...todos,name}
      });

ここでスプレッドを使ってしまっているので、todosが配列ではなくなってしまいます。todos.concat([{/* 目的のオブジェクト */}])のような形にして、配列を維持したまま更新を行いましょう。

Comments

[tomomari]

配列のまま操作する必要があるのがよくわかりました。ありがとうございます！
対応する場所を以下のように変更しました。

addTodo = () => {
const{todos,name}=this.state;
this.setState({
todos.concat([{...todos,name}])
});
}

すると、todos.concatの[.]のところでエラーが出て、Failed to Compile と言われてしまいました。

お手数ですが、JSの知識がまだないので対応する場所を、書き換えていただけないでしょうか？

Answer 2

だいぶ前の質問ですが、検索から飛んできた人のためにも一応回答しておきます(未だに回答受付中だし)。

スプレッド構文(...<これを使うやつ)はオブジェクトリテラルの内側で使うとオブジェクトとしてコピーされます。
配列としてコピーするには配列リテラルの内側で使う必要があります。

スプレッド構文 - JavaScript | MDN

スプレッド構文と似てるけど別物なやつがあります。混同しがちなので存在だけ知らせておきます。
分割代入 - JavaScript | MDN

const array1 = ["one", "two", "three"];
const array2 = ["zero", ...array1, "four"];
console.log(array2); // ["zero", "one", "two", "three", "four"]

const object1 = { hoge: 10, huga: 20 };
const object2 = { ...object1, piyo: 30 };
console.log(object2); // { hoge: 10, huga: 20, piyo: 30 }

const object3 = { ...array1, piyo: 30 };
console.log(object2); // { 0: "one", 1: "two", 2: "three", piyo: 30 }

また、concatを使ってarray2と同じことをしようとするとこうなります。

const array2 = ["zero"].concat(array1).concat(["four"]);

concatでもできますが、スプレッド構文の方が直感的で複数回連結する場合にもわかりやすいのでスプレッド構文をおすすめします。
なのでこの場合の正解はこうですね。(nameをリセットしてないですが)

addTodo = () => {
    const { todos, name } = this.state;
    this.setState({
        todos: [...todos, name]
    });
}

ただ実は、addTodoが複数回呼ばれた場合todosの参照が古いままなので一つしか追加されません。
この問題に対応したのが下記です。
同じToDoが複数追加されても困るので、この場合はこのままでもいいかもしれませんが。

addTodo = () => {
    this.setState(state => ({
        todos: [...state.todos, state.name]
    }));
}

あと全く別の話ですがnameは意味が広すぎるため、newTodoなどとすることをおすすめします。
後で読み直すとき格段にわかりやすくなります。