React setStateでstateを更新できない

Question

Reactを使い始めたばかりです。Todoアプリのコードです。

TodoAppがアプリ全体（親）、
Totolistがやること一覧を表示しているコンポーネント（子）、
そしてTaskがそのやること一つ一つのコンポーネントです（孫）。

Taskのゴミ箱をクリックすると、this.handleClickRemoveが発火し、TodolistのhandleRemoveが呼び出され、TodoAppのcallBackRemoveTaskが呼び出され、最終的に選択したTaskを消去することができます。こちらの消去機能は動きます。

同じように、Task選択機能と、変更機能を追加しようとしましたが、画面は変わりません。

console.log()でTaskのhandleClickToggleDone、handleChangeTextの処理をみてみると、
TodoAppでsetStateでstateを何度も変更しているようにしているのですが、変更されていないことが分かりました()。

選択機能と変更機能も消去機能と同じようにした（TaskでTodoAppのstateを使えるように、propsで値を渡したり、変更されたstateをAppTodoに渡してsetStateしている）にも関わらず、
何故、変更されていないのでしょうか？

コードimport React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './components/TodoList';
class TodoApp extends React.Component {

  constructor(){
    super();
    this.state = {
      data:
      [
        {
          id: this.createHashId(),
          text: 'sample todo1',
          isDone: false
        },
        {
          id: this.createHashId(),
          text: 'sample todo2',
          isDone: true
        }
      ],
      searchText: ''
    };
    this.callBackRemoveTask = this.callBackRemoveTask.bind(this);
    this.callBackChangeTask = this.callBackChangeTask.bind(this);
    this.callBackToggleTask = this.callBackToggleTask.bind(this);
    this.callBackAddTask = this.callBackAddTask.bind(this);
    this.callBackSearch = this.callBackSearch.bind(this);
    this.filterCollection = this.filterCollection.bind(this);
  }

  createHashId(){
    return Math.random().toString(36).slice(-16);
  }

  callBackRemoveTask(id){
    let data = _.reject(this.state.data, { 'id': id });
    this.setState({
      data: data
    });
  }
  callBackChangeTask(text){
    this.setState({
      text: text
    });
  }
  callBackToggleTask(isDone){
    this.setState({
      isDone: !isDone
    });
  }




  render() {


    return (
      <div>

        <TodoList data={data} callBackRemoveTask={this.callBackRemoveTask} callBackToggleTask={this.callBackToggleTask} callBackChangeTask={this.callBackChangeTask} />

      </div>
    );
  }
}

ReactDOM.render(
  <TodoApp/>,
  document.getElementById('app')
);

import React from 'react';
import Task from './Task';

export default class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.handleRemove = this.handleRemove.bind(this);
    this.handleToggleDone = this.handleToggleDone.bind(this);
    this.handleChangeText = this.handleChangeText.bind(this);
  }
  handleRemove(id){
    this.props.callBackRemoveTask(id);
  }
  handleToggleDone(isDone){
    this.props.callBackToggleTask(isDone);
  }
  handleChangeText(text){
    this.props.callBackChangeTask(text);
  }
  render() {
    let tasks = [];
    for(let i in this.props.data){
      tasks.push(<Task key={this.props.data[i].id}
                       id={this.props.data[i].id}
                       text={this.props.data[i].text} isDone={this.props.data[i].isDone } onRemove={this.handleRemove} onToggleDone={this.handleToggleDone} onChangeText={this.handleChangeText} />);
    }

    return (
      <ul className="list js-todo_list">
        {tasks}
      </ul>
    );
  }
}

import React from 'react';
import ClassNames from 'classnames';
import _ from 'lodash';
export default class Task extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      id: this.props.id,
      text: this.props.text,
      isDone: this.props.isDone,
      editMode: false
    };
    this.handleClickToggleDone = this.handleClickToggleDone.bind(this);
    this.handleClickRemove = this.handleClickRemove.bind(this);
    this.handleClickshowEdit = this.handleClickshowEdit.bind(this);
    this.handleKeyUpCloseEdit = this.handleKeyUpCloseEdit.bind(this);
    this.handleChangeText = this.handleChangeText.bind(this);
  }
  handleChangeText(e){
    this.props.onChangeText(e.target.value);
    console.log(e.target.value);
  }
  handleClickToggleDone () {
    this.props.onToggleDone(this.state.isDone);
    console.log(this.state.isDone);
  }
  handleClickRemove(e) {
    this.props.onRemove(this.state.id);
  }
  handleClickshowEdit() {
    this.setState({
      editMode: true
    });
  }
  handleKeyUpCloseEdit(e) {
    if(e.keyCode === 13 && e.shiftKey === true){
      this.setState({
        text: e.currentTarget.value,
        editMode: false
      });
    }
  }
  componentWillUnmountWillMount(){
    console.log('componentWillUnmountWillMount');
  }
  render() {
    // reactにはclassを付け替えする機能はないので、外部ライブラリを使う
    const classNameLi = ClassNames({
      'list__item': true,
      'list__item--done': this.state.isDone
    });
    const classNameIcon = ClassNames({
      'fa': true,
      'fa-circle-thin': !this.state.isDone,
      'fa-check-circle': this.state.isDone,
      'icon-check': true
    });
    // underscoreのようなif文は使えないので、変数に前もって入れておく
    const input = (this.state.editMode) ?
      <input type="text" className="editText" value={this.state.text}
             onChange={this.handleChangeText} onKeyUp={this.handleKeyUpCloseEdit}/> :
      <span onClick={this.handleClickshowEdit}>{this.state.text}</span>;

    return (
      <li className={classNameLi}>
        <i className={classNameIcon} onClick={this.handleClickToggleDone} aria-hidden="true" />
        {input}
        <i className="fa fa-trash icon-trash" onClick={this.handleClickRemove} aria-hidden="true" />
      </li>
    );
  }
}

Answer 1

TodoApp の callBackChangeTask や callBackToggleTask で this.setState していますが、これは TodoApp 全体の state を更新してしまっています。

// TodoApp の state

{
  "data": [
    {
      "id": "0.c0ihmbr6ocu",
      "text": "sample todo1",    // 本来は、これや
      "isDone": false            // これや
    },
    {
      "id": "0.43mkltzx7ie",
      "text": "sample todo2",    // これや
      "isDone": true             // これを更新したいはず
    }
  ],
  "searchText": "",

  "text": "edited todo",         // 実際には、これや
  "isDone": true                 // これが追加されてる
}

text や isDone は各タスクの属性ですから、callBackChangeTask や callBackToggleTask の引数にタスクの id を追加して、指定されたタスクの text や isDone を変更する必要があります。

// TodoApp より

  callBackChangeTask(id, text){
    let data = this.state.data.map(item => {
      if (item.id === id) {
        return { ...item, text };
      } else {
        return item
      }
    });
    this.setState({
      data: data
    });
  }

  callBackToggleTask(id, isDone){
    let data = this.state.data.map(item => item.id === id ? { ...item, isDone: !isDone } : item);
    this.setState({ data });
  }

また、Task の中で id, text, isDone を state に保存してますが、これらは props の値をそのまま使うべきです。Task の state に必要なのは editMode だけのはず。

Comments

[neginattofan]

ありがとうございます。おかげさまで解決できました！
React初心者にもわかりやすいコードで大変助かりました！