Reactにて、一度でもクラスを付与すると、期待とは異なる要素が削除されてしまいます

実現したいこと

ADDボタンを押すとTodoリストが追加されて、removeボタンを押すとそのTodoリストが削除されます。
iconをクリックするとis-activeクラスが着脱します。

iconをクリックするまでは不具合が起こりません。
一度でもiconをクリックしてis-activeクラスを付与すると、期待とは異なる要素が削除されるようになってしまいました。消える要素の規則性はないように見えます

    removeTodo = (index) => {
        const {todos} = this.state;
        this.setState({
            todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
        });
    }

    render() {
        return(
            <>
                <div className="l-flex form">
                    <Form onChangeFunction={this.changeValue} value={this.state.value} />
                    <Btn text="ADD!" onClickFunction={this.addTodo} />
                </div>
                <TodoList todos={this.state.todos} onClickFunction={this.removeTodo} />
            </>
        );
    }

const TodoList = (props) => {
    return(
        <ul className="list l-flex">
            {props.todos.map((todo, index) =>
                <List onClickFunction={props.onClickFunction} key={index} todo={todo} index={index} />
            )}
        </ul>
    );
}

    changeActive = () => {
        this.setState({
            active: !this.state.active,
        });
    }

    render() {
        return(
            <li className={"list-item l-flex" + (this.state.active ? " is-active" : "")} >
                <i onClick={this.changeActive} className={"far list-icon" + (this.state.active ? " fa-check-square" : " fa-square")}></i>
                <p>{this.props.todo}</p>
                <Btn text="remove!" onClickFunction={() => this.props.onClickFunction(this.props.index)} />
            </li>
        );
    }

調べてみたこと

this.props.indexの値をconsole.log()で見てみました。
例えばリストが三つあって更にADDボタンを押してリストを追加する→0,1,2,3と全ての値が一度ずつ呼ばれました。

hoshi-takanori

2020/04/07 08:17

こちらで試した限りでは問題なく動いてるように見えますけど…。

退会済みユーザー

2020/04/08 03:13

https://nakamura0907.github.io/react_todo/public/ リンクです。 5つほどTodoリストを追加して真ん中のリストにis-activeを付与してみてください。そしてis-activeを付与したリストを削除しようとして見てください。全く異なるリストが削除されてしまいます…

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

回答1件

ベストアンサー

List の key が index のため、削除するとその後ろの内容がずれてしまってますね。
解決方法は以下の 3 種類 (ただし 1 は不完全) でしょう。

List の key を index ではなく todo とする (同じ名前の todo があると駄目)
todo の各項目に一意な id を持たせる
active を List の state ではなく、todo の属性にする

例えば、todos = ['aaa', 'bbb', 'ccc'] で、bbb にチェックしたとします。

<List key={0} todo='aaa' index={0} /> <!-- state = { active: false } -->
<List key={1} todo='bbb' index={1} /> <!-- state = { active: true  }  -->
<List key={2} todo='ccc' index={2} /> <!-- state = { active: false } -->

ここで aaa を削除すると、次のようになります。

<List key={0} todo='bbb' index={0} /> <!-- state = { active: false } -->
<List key={1} todo='ccc' index={1} /> <!-- state = { active: true  } -->

つまり、<List key={2} /> が <List key={1} />、<List key={1} /> が <List key={0} /> になる (active の値も移動する) のではなく、<List key={0} /> や <List key={1} /> は active の値も含め、そのままの位置で、todo の文字列だけが書き変わる (<List key={2} /> はなくなる) ために、期待とは異なる要素が削除されたように見えています。

とりあえず 2 の方法で修正する場合、まず npm install uuid して、Todo.tsx と TodoList.tsx をそれぞれ以下のように書き換えればいいと思います。

diff
1@@ -1,12 +1,18 @@
2 import * as React from 'react';
3+import { v4 as uuidv4 } from 'uuid';
4 
5 import Btn from '../presentational/atoms/Btn';
6 import Form from '../presentational/atoms/Form';
7 import TodoList from '../presentational/molecules/TodoList';
8 
9+interface TodoItem {
10+    id: string;
11+    value: string;
12+}
13+
14 interface IState {
15     count: number;
16-    todos: string[];
17+    todos: TodoItem[];
18     value: string;
19 }
20 
21@@ -24,7 +30,7 @@ export default class Todo extends React.Component<{}, IState> {
22     addTodo = () => {
23         const {todos, value } = this.state;
24         this.setState({
25-            todos: [...todos, value]
26+            todos: [...todos, { id: uuidv4(), value } ]
27         })
28     }
29

diff
1@@ -6,7 +6,7 @@ const TodoList = (props) => {
2     return(
3         <ul className="list l-flex">
4             {props.todos.map((todo, index) =>
5-                <List onClickFunction={props.onClickFunction} key={index} todo={todo} index={index} />
6+                <List onClickFunction={props.onClickFunction} key={todo.id} todo={todo.value} index={index} />
7             )}
8         </ul>
9     );