React + Pusherを用いたリアルタイム通信におけるsetStateでの再レンダーがかからない問題

Question

概要

現在、React + Pusherを利用したリアルタイムな機能の実装をしています。
具体的には、react-rndを使用したGUI操作を、Puhserを利用したWebSocket通信で別端末でもリアルタイムに変化させるというものです。
UIのイメージとしてはコンポーネント(react-rnd)の追加ボタンがあり、それを押すとコンポーネント(react-rnd)が追加され、GUIでの拡大縮小や移動ができるというイメージです。
コンポーネントの追加をリアルタイムで同期することは出来たのですが、移動と拡大縮小が中々うまいこといきません。
ロジックとしては、移動の際はx・y、拡大縮小の際はwidth・heitghtをidと一緒に送信し、受け取り側ではsetStickiesでstikiesの中身を、Pusherから受け取ったデータ(id、x・y、width・heght)で更新するというものです。idはどのコンポーネントが変更されたかということを特定できる一意な値です。
データの受け取りやWebSocket通信が正常に行われていることはconsole.logで確認済みです。
ロジックに関しても追加が出来ているということから特に問題はなさそうです。
つまり、setStickiesでのstateの更新がうまく行われておらず、stateの変更による再レンダーがかかっていないようです。
該当の部分はuseEffect内の

channel.bind('App\Events\StickyResized', data => {...}

の中に記述されている下記の部分です。

let newStickies = [...stickies]
const index = stickies.findIndex(sticky => sticky.id === data.sticky.id)
newStickies[index].width = data.sticky.width
newStickies[index].height = data.sticky.height
console.log(newStickies[index])
setStickies(newStickies)

自分なりに色々試しましたが、解決せず…。
どなたか解決方法のご教授お願い致します。

更新したいstateの中身はこんな感じです。

{stickies: Array(2)}
stickies: Array(2)
0:
id: 5
board_id: "n56t47gm"
user_id: "a"
x: 157
y: 214
width: 180
height: 180
body: ""
created_at: "2020-02-15 13:24:45"
updated_at: "2020-02-15 13:39:14"
__proto__: Object
1:
id: 6
board_id: "n56t47gm"
user_id: "a"
x: 342
y: 93
width: 180
height: 180
body: ""
created_at: "2020-02-15 13:48:01"
updated_at: "2020-02-15 13:48:03"
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object

該当のコード

import React, { useState, useEffect } from "react"

import styled from 'styled-components'
import { createStyles, makeStyles } from '@material-ui/core/styles'

import { Rnd } from "react-rnd"

import Footer from '../Footer'
import Sticky from './../../models/Sticky'
import User from './../../models/User'
import Board from './../../models/Board'

import Pusher from 'pusher-js'
import * as pusherConfig from './../../config/pusher'

// Pusherの設定
Pusher.logToConsole = true
const pusher = new Pusher(pusherConfig.key, {
    cluster: pusherConfig.cluster,
    forceTLS: false
})
const useStyles = makeStyles(theme => createStyles({
    toolbar: {
        ...theme.mixins.toolbar
    },
}))

const style = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    background: "#f0f0f0",
    padding: "18px",
    background:
        "linear-gradient(135deg, transparent 0px, #ccc 0) top left, linear-gradient(225deg, transparent 20px, #ccc 0) top right, linear-gradient(315deg, transparent 0px, #ccc 0) bottom right, linear-gradient(45deg,  transparent 0px, #ccc 0) bottom left",
    backgroundSize: '51% 51%',
    backgroundRepeat: 'no-repeat'
}

const StickyBoard = () => {
    const classes = useStyles()
    const [stickies, setStickies] = useState([])
    let isChanged = true

    useEffect(() => {
        const channelName = 'sticky-' + Board.getBoardID()
        const channel = pusher.subscribe(channelName)

        // 付箋を追加した時
        channel.bind('App\Events\StickyAdded', data => {
            setStickies([...stickies, data.sticky])
        })
        // 付箋を編集した時
        channel.bind('App\Events\StickyEdited', data => {
            setStickies([...stickies, data.sticky])
        })
        // 付箋を動かした時
        channel.bind('App\Events\StickyMoved', data => {
            let newStickies = [...stickies]
            const index = stickies.findIndex(sticky => sticky.id === data.sticky.id)
            newStickies[index].x = data.sticky.x
            newStickies[index].x = data.sticky.y
            console.log(newStickies[index])
            setStickies(newStickies)
        })
        // 付箋をリサイズした時
        channel.bind('App\Events\StickyResized', data => {
            let newStickies = [...stickies]
            const index = stickies.findIndex(sticky => sticky.id === data.sticky.id)
            newStickies[index].width = data.sticky.width
            newStickies[index].height = data.sticky.height
            console.log(newStickies[index])
            setStickies(newStickies)
        })

        return () => {
            channel.unbind('App\Events\StickyAdded')
            channel.unbind('App\Events\StickyEdited')
            channel.unbind('App\Events\StickyMoved')
            channel.unbind('App\Events\StickyResized')
        }
    }, [stickies, setStickies])

    useEffect(() => {
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Sticky.get(token, boardID)
                .then(res => {
                    console.log(res.data)
                    setStickies(res.data.stickies)
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }, [isChanged])

    const addSticky = () => {
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()
        if (token) {
            Sticky.add(token, boardID)
                .catch(e => {
                    console.log(e)
                })
        }
    }
    const handleEdit = (e) => {
        //Sticky.edit(token)
    }
    const handleMove = (id) => {
        const token = JSON.parse(User.get('token')).token
        return (e, data) => {
            Sticky.move(token, id, data.x, data.y)
                .catch(e => {
                    console.log(e)
                })
        }
    }
    const handleResize = (id) => {
        const token = JSON.parse(User.get('token')).token
        return (e, dir, ref) => {
            Sticky.resize(token, id, ref.style.width.slice(0, -2), ref.style.height.slice(0, -2))
                .catch(e => {
                    console.log(e)
                })
        }
    }

    return (
        <>
            <div className={classes.toolbar} />
            <p><button onClick={addSticky}>付箋を追加</button></p>
            {stickies.map((sticky, i) => (
                <Rnd
                    key={i}
                    style={style}
                    maxWidth={220}
                    maxHeight={220}
                    minWidth={140}
                    minHeight={140}
                    default={{
                        x: sticky.x,
                        y: sticky.y,
                        width: sticky.width,
                        height: sticky.height
                    }}
                    onDragStop={handleMove(sticky.id)}
                    onResizeStop={handleResize(sticky.id)}
                >
                    <Textarea onMouseDown={e => e.stopPropagation()}></Textarea>
                </Rnd>
            ))}
            <Footer />
        </>
    )
}

const Textarea = styled.textarea`
    resize: none;
    width: 100%;
    height: 100%;
    font-size: 1.3em;
`

export default StickyBoard

Answer 1

stateの変更による再レンダーがかかっていないようです。

デバッグしていないので確実ではないですが、このコードだとそもそも position や width / height のスタイルがあたっていない気がしましたmm
state の x, y 等を一旦決め打ちにして位置が正しくセットされるのか確認したい気がします。
とともに、もしそれが原因であれば JSX に渡す style をコンポーネント外で定数にするのではなく、state を使って動的にする必要があるかと思いましたmm