React todoアプリで完了したタスクを移動させたい

to do アプリで、完了したタスクを移動させようとしているのですが、上手くいきません

constructor(props){
    super(props);
    this.state={
      value:'',
      todoList:[],
      completeList:[],
    
    }
  }
  
  onChange(event){
    this.setState({
      value: event.target.value,
    })
  }

  add(){
    this.setState({
    todoList: this.state.todoList.concat(this.state.value),
    value:'',
    
    })
  }
  delete(idx){
    const value = this.state.todoList;
    value.splice(idx,1);
    this.setState({todoList: value});
  }
  complete(idx){
    const value = this.state.todoList;
    const CompleteTodo=this.state.todoList;

    value.splice(idx,1);
    this.setState({todoList: value});
    this.setState({completeList:CompleteTodo});
    }

  

    render() {

      const todoListNode= this.state.todoList.map((todo,idx)=>{
        return <li key={idx}>
          　　　　{todo}
          　　　　<button onClick={()=>{this.delete(idx)}}>削除</button>
          　　　　<button onClick={()=>{this.complete(idx)}}>完了</button>
          　　　</li>
      })
      const CompleteListNode=this.state.completeList.map((todo,idx)=>{
        return <li key={idx}>
          　　　　{todo}
          　　　</li>
       })

    

      return (
        <div>
          
          <input 
          type="text" 
          value={this.state.value}
          onChange={(event)=>{this.onChange(event)}}
          required="required"
          />
          <button onClick={()=>{this.add()}}>保存</button>

          <ul>
          {todoListNode}
          </ul>
          <h2>完了</h2>
          <ul>
          {CompleteListNode}
          </ul>
          
        </div>

      );
    }
  }

complete(idx){
    const value = this.state.todoList;
    const CompleteTodo=this.state.todoList;

    value.splice(idx,1);
    this.setState({todoList: value});
    this.setState({completeList:CompleteTodo});
    }

上のcomplete内の書き方がおかしいのではないかと思って試行錯誤しているのですが、エラーしか出ないので困っています。

行動規範の内容に同意します

回答1件

ベストアンサー

この原因と直接関係あるかはわかりませんが、reactではprops/stateは基本的にイミュータブルである必要があり、これを守らないとバグが発生する確率が上がったりundo機能を実装しようとした時に困ったりします。

イミュータブルとは不変という意味で、例えば配列であれば以下のように破壊的な変更をするとarr1だけでなくarr2も変わってしまいます。
こうならないために値を追加/削除/上書きしたい時にはarr3のように新しい配列を作る必要があります。
ここで使用しているスプレッド構文については以下のリンクを参照するか検索してください。
Arrayだとconcatのようなものです。

スプレッド構文 - JavaScript | MDN

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

js
1const arr1 = [1, 2, 3];
2const arr2 = arr1;
3const arr3 = [...arr1];
4arr1.push(4);
5console.log(arr1); // [1, 2, 3, 4]
6console.log(arr2); // [1, 2, 3, 4]
7console.log(arr3); // [1, 2, 3]

本題のcompleteですが、completeListをtodoListで上書きしてしまっているためでしょう。
deleteとcompleteList版のaddを組み合わせることでできると思います。

※addに関しては元のコードでもできますが、コードを統一するためにスプレッド構文を使用しています。

js
1add() {
2    this.setState({
3        todoList: [...this.state.todoList, this.state.value],
4        value: '',
5    });
6}
7delete(idx) {
8    const todoList = [...this.state.todoList];
9    todoList.splice(idx, 1);
10    this.setState({ todoList });
11}
12complete(idx) {
13    const todoList = [...this.state.todoList];
14    const [completeTodo] = todoList.splice(idx, 1);
15    this.setState({
16        todoList,
17        completeList: [...this.state.completeList, completeTodo],
18    });
19}