useEffectが発火しない

Question

やりたいこと

API経由で取得したJsonデータをテーブル形式で表示させたいです

画面上で表示させる項目や表示させる行数を指定できるようにしたいです

APIやルーティングはLaravelで作っています

ソース

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Example = () => {
    const [param, setParam] = useState([]);
    const [lines, setLines] = useState(3);
    const [tableData, setTableData] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const get = async () => {
            // 実際はparamとlinesを渡してAPI経由でデータを取得しています
            const sampleData = [
                { 'id': 1, 'name': 'taro', 'age': 16 },
                { 'id': 2, 'name': 'hanako', 'age': 15 },
                { 'id': 3, 'name': 'satoshi', 'age': 22 },
                { 'id': 4, 'name': 'kaori', 'age': 19 },
            ]
            await setTableData(sampleData)
            setLoading(true)
            console.log('useEffect was called')
        }
        get()
    }, [lines, param])

    const changeParam = (target) => {
        const arr = param;
        const index = arr.findIndex((v) => v == target);
        if (index == -1) {
            arr.push(target);
            setParam(arr);
        } else {
            arr.splice(index, 1);
            setParam(arr);
        }
        console.log('param >> ', param)
    }

    return (
        <div>
            <p>表示行数</p>
            <input type='number' value={lines} onChange={(e) => { setLines(e.target.value) }} />
            <input type='checkbox' onChange={() => { changeParam('id') }} />ID
            <input type='checkbox' onChange={() => { changeParam('name') }} />Name
            <input type='checkbox' onChange={() => { changeParam('age') }} />Age
            {loading && <TableEample data={tableData} />}
        </div>
    )
}


export default Example;

現象

初回ロード時とlinesの値が変わったときはconsoleに'useEffect was called'と表示されます

チェックボックスをクリックしたときにparamの値は変わっていますがuseEffectが呼ばれません

チェックボックスをクリックしたタイミングでデータを更新できるようにしたいです。

Answer 1

changeParamの中で、arrを破壊的に変更してしまっているため、arrそのものは同じインスタンスとなり、useEffectに変更が認識されません。

最初のconst arr = param;をconst arr = param.slice();として、どんな変更をしてもインスタンスが入れ替わるようにしておきましょう。

Comments

[dyekv]

とても早い回答ありがとうございました。