React: toggleが正常に動かない

Question

Reactで、お気に入りに追加機能を作っています。

機能としては、名前横のアイコンをクリックし、お気に入りに追加するというものです。

もしもう一度アイコンをクリックすると、toggleされて、likesからは外されます。

その中で、いくつか上手くいかない点があります。

①
toggleが正常に動いていません。1番目をクリックし、2番目をクリックし、さらにもう1回2番目をクリックすると、なぜか1番目が消えてしまいます。

②
console.log("this.state.likes", this.state.likes); でstateのlikes arrayを見てみると、1個前にクリックしたelementが表示されます。どうしてこのようなことが起こるのでしょうか？

どなたかお力をお貸しいただければ幸いです。

import React from 'react';
import axios from 'axios';
import IcoMoon from 'react-icomoon';

export default class PersonList extends React.Component {
    
    state = {
        persons: [],
        likes: []
    }

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const persons = res.data;
                this.setState({ persons });
            })
    }

    handleClick = person => {

        if (this.state.likes.includes(person)) {

            this.setState({
                likes: this.state.likes.splice(this.state.likes.indexOf(person), 1)
            });

            console.log("included", this.state.likes);
            return;
        }
        
            this.setState({
                likes: [...this.state.likes, person]
            });
            console.log("this.state.likes", this.state.likes);
    };

    likesTemplate = item => <li key={item}>{item}</li>;

    renderLikes = () => {
        return this.state.likes.map(i => this.likesTemplate(i));
    }

    render() {
        return (
            <div>
                {this.state.persons.map(person => {
                return <li key={person.name}><IcoMoon icon="heart" onClick={() => {this.handleClick(person.name)}} />{person.name}</li>}
            )}

            <h2>Favorite Person</h2>
            <ul>
                {this.renderLikes()}
            </ul>
            </div>
        )
    }
}

Answer 1

Array.splice の戻り値は取り除かれた要素を含む配列ですので、そのような挙動になるのだと思います。Array.filter を使ってみてはいかがでしょうか？

if (this.state.likes.includes(person)) {
  this.setState({
    likes: this.state.likes.filter(item => item !== person)
  });

  console.log("included", this.state.likes);
  return;
}

console.log("this.state.likes", this.state.likes); でstateのlikes arrayを見てみると、1個前にクリックしたelementが表示されます。どうしてこのようなことが起こるのでしょうか？

setState はコンポーネントのローカル state の更新をスケジュールするために使用するものです。
言い換えると、

this.setState({
  likes: [...this.state.likes, person]
});

の直後に this.state はまだ更新されていません。ですので this.setState 直後に
console.log を呼び出しても、直前の状態がコンソールログに表示されます。

何度も申し訳ありません。もう1つだけ、if (this.state.likes.includes(person)) {のところに書いた return; なのですが、こちらはどうして必要なのでしょうか？　実はこれは別の人にアドバイスをされて書いたのです。このreturnを削除すると、挙動がおかしくなってしまいます。ですが、何のための記述なのか理解できずにいました。

return 文は関数の実行を終了 する役割があります。そのため return 文を消してしまうと、person が this.state.likes に含まれている場合に、if 文の中が実行された後に

this.setState({
  likes: [...this.state.likes, person]
});
console.log("this.state.likes", this.state.likes);

までもが実行されてしまいます。

Comments

[vankick]

思うような動きになりました！.spliceと.filterの詳しい挙動が分かっていないので、勉強しようと思います。もう1つ質問させていただきたいのですが、上記コードの"console.log("this.state.likes", this.state.likes);" の部分なのですが、これを見ると、今クリックしたelementは追加されておらず、1個前にクリックしたもののみ表示されるのですが、これの原因なども分かったりはしますか？

[vankick]

ご丁寧に教えていただき、ありがとうございます。
何度も申し訳ありません。もう1つだけ、if (this.state.likes.includes(person)) {のところに書いた return; なのですが、こちらはどうして必要なのでしょうか？　実はこれは別の人にアドバイスをされて書いたのです。このreturnを削除すると、挙動がおかしくなってしまいます。ですが、何のための記述なのか理解できずにいました。

[vankick]

非常に分かりやすいです。不明点が解消されました。ご丁寧に説明していただきまして、ありがとうございました！