ReactとRailsでいいね数を表示したい

Question

いいねクリック後にいいね数をブラウザ上に表示させたい

現在RailsとReactを用いていいね機能の実装はできましたが、いいねクリック後に投稿されたものにいいね数を表示させたいのですが実装方法がわからず、皆様のアドバイスを頂きたくご相談させて頂きました。

現在の実装ですと初期値を0と設定しておりますが、いいねをすると0と表示され、削除をすると-1と表示されてしまうので、この部分を解決したいです。

イメージとしては、Twitterのいいね機能になります。

###実装の仕様は下記の通りです
・投稿に対してログインユーザーがいいねできる
・Reactの非同期処理で、クリック時に色が変わりfavoriteテーブルにidが保存される
・クリックされる度に、いいね数が変化する
・初期値は0と設定されており、削除したとしても-1表示にならない実装(現在の実装ですと、初期値0に対して数字が変化してしまうため、クリックすると0となり、削除すると-1と表示されてしまう。)

該当のソースコード

app/javascript/bundles/Favorite.jsx

import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { HeartFill } from 'react-bootstrap-icons';
import axios from 'axios'

axios.defaults.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

const Favorite = (props) => {
    const { uploadId, favoriteId } = props;
    const [id, setId] = useState(favoriteId);
    const [count, setCount] = useState( 0)

    const clicked = async () => {
        if (id == null) {
            const { data: { id = null } } = await axios.post('/favorites', { upload_id: uploadId })
            id && setId(id);
        } else {
            await axios.delete(`/favorites/${id}`)
            setId(null);
        }

        if (id == null) {
            setCount(count + 1)
        } else {
            setCount(count - 1)
        }
    }

    return (
        <>
            <HeartFill
                color={id ? 'red' : '#616161'}
                size={25}
                onClick={clicked}
            />
            <p>{count}</p>
        </>
    );
};

Favorite.propTypes = {};

export default props => <Favorite {...props} />;

app/views/upload/index.html.erb

<div class="favorite">
                <% if user_signed_in? %>
                  <p><%= react_component("Favorite", props: { uploadId: upload.id, favoriteId: upload.favorite_by(current_user)&.id }, prerender: false) %></p>
                <% else %>
この部分にログインしていないユーザーに、いいねボタンといいね数を表示させる実装をする
                <% end %>
              </div>

試したこと

・条件分岐でcount ===　0 を設定してみたが、いいね数が表示されなくなってしまった。
・index.html.erbに<%= upload.favorite.count%>と記述して挙動を確認してみたが、リロードしない限りいいね数が変化しなかった。

補足情報（FW/ツールのバージョンなど）

開発環境
・rubymine
・ruby(3.0.1)
・Ruby on rails (6.1.3.1)

Comments

[FKM]

count === 0 じゃなくて count > -1 にしないと、0にしか反応しないのでは？

[yuu0000]

ご連絡頂きありがとうございます！

下記のように修正してみましたが誤りがありますでしょうか、、
if (id == null) {
setCount(count + 1)
} else {
setCount(count > - 1)
}

[FKM]

setCountは同期をとるためのメソッドなので、そんな使い方してはだめです。

[yuu0000]

使用方法にあやまりがあるんですね、、

Answer 1

JSXテンプレートに以下のように記述してもだめでしょうか？

   return (
        <>
            <HeartFill
                color={id ? 'red' : '#616161'}
                size={25}
                onClick={clicked}
            />
            <p>{count > -1 && count}</p>
        </>
    );

Comments

[yuu0000]

ありがとうございます。

記載して頂いた記述に修正してみたところ、いいねされてもカウントが変化しない挙動になりました。

const [count, setCount] = useState( 0)で定義した、setCountが未定義のために変化していないと考えました。

const clicked = async () => {
if (id == null) {
const { data: { id = null } } = await axios.post('/favorites', { upload_id: uploadId })
id && setId(id);
} else {
await axios.delete(`/favorites/${id}`)
setId(null);
}
}
上記のクリック時の処理の中で、setCountの処理を記述する必要があると思いますが、条件分岐でクリック時にidがnullの場合にカウントを変化させる記述とも考えております。

[FKM]

clickedメソッドの最後にsetCount(count)としないとcountの値の同期がとれませんよ。そこはReactのuseStateフックの分割代入部分なので。
自分は何箇所も同じフックを置くのはよくないとアドバイスを送ったつもりでした（最後だけで十分です）

[yuu0000]

定義しないと処理されないですよね、、

const clicked = async () => {
の配下にsetCount(count)を記述することですね

[yuu0000]

下記のように修正してみたことろ、いいねをクリックした場合でもカウント数に変化が見られない状態になりました。

const clicked = async () => {
if (id == null) {
const { data: { id = null } } = await axios.post('/favorites', { upload_id: uploadId })
id && setId(id);
} else {
await axios.delete(`/favorites/${id}`)
setId(null);
}
setCount(count > -1 && count)

}

return (
<>
<HeartFill
color={id ? 'red' : '#616161'}
size={25}
onClick={clicked}
/>
<p>{count}</p>
</>
);