useStateの値が初期値に戻ってしまっている。

Question

前提・実現したいこと

useStateで変更した値が初期値に戻ってしまうのを防ぎたいです。

発生している問題・エラーメッセージ

バックエンド処理のレスポンスで取得出来ていた値が
どこかのタイミングで恐らく初期化されてしまっている。

該当のソースコード

  //子のテーブルで表示する値
  const [cellcsvs, setCellcsvs] = useState([]);

  useEffect(() => {
    setCells(cellcsvs);
    //ここではcellcsvsに値が入っている。
    console.log(cellcsvs);
  }, [cellcsvs]);

  //子に設定したテーブルのボタンクリック時に走る
  const radioBtnCallback = useCallback((idx, e) => {
    console.log("Show Photo: " + idx)

    //ここのcellcsvsの値がから配列になってしまっている。
    console.log(cellcsvs);
    console.log(1010101010101);
    idx = Number(idx);
    setOpen(true);
  }, [])

  //バックエンド処理
  //検索ボタン押下時
  const handleSubmit = (e) => {
    e.preventDefault();
    const dfrom = datefrom ? new Date(datefrom._d) : '';
    const updatefrom = datefrom ? `${dfrom.getFullYear().toString().padStart(4, '0')}/${(dfrom.getMonth() + 1).toString().padStart(2, '0')}/${dfrom.getDate().toString().padStart(2, '0')}` : '';
    const dto = dateto ? new Date(dateto._d) : '';
    const updateto = dateto ? `${dto.getFullYear().toString().padStart(4, '0')}/${(dto.getMonth() + 1).toString().padStart(2, '0')}/${dto.getDate().toString().padStart(2, '0')}` : '';
    // console.log(company_cd, project_cd, user_id, filename, updatefrom, updateto, examno);

    SpecimenService.getMediCsv(company_cd, project_cd, user_id, filename, updatefrom, updateto, examno).then((resp) => {

      //レスポンスの値セット
      setCellcsvs(resp.data);
    });
  };


return (
          <Box p={1}>
          {(() => {
          if (cellcsvs.length) {
            //検索結果を一覧表示するテーブル
            return <SpecimenMedicalResultTable data={cellcsvs} callback={radioBtnCallback} />
          }
        })()}
            
          </Box>
          );

※コード量が多いため重要そうな箇所のソースコードだけ載せています。

試したこと

同じような問題が発生している方がいないか調べて見たのですが見つけることができず、
ダメもとで(新たにtest変数を追加)

  const [cellcsvs, setCellcsvs] = useState([]);
  var test = [];

  useEffect(() => {
    setCells(cellcsvs);
    console.log(cellcsvs);
    //ここでもtestには値が入っている。
    test = cellcsvs;
  }, [cellcsvs]);

const radioBtnCallback = useCallback((idx, e) => {
    console.log("Show Photo: " + idx)
    console.log(test);
    console.log(cellcsvs);
    console.log(1010101010101);
    idx = Number(idx);
    setOpen(true);

    // while (cells[i].) {

    // }
  }, [])

のような実装方法も試してみましたがこれもコールバック内では値が空配列になってしまっていました。
useEffectなどで問題が発生してしまっているかなど考えていますが、理解が浅く
自己解決することが難しかったためどなたかご教授をお願いします。

他に確認したいファイル等ありましたら教えてください。

Answer 1

useCallbackは第二引数の配列の値が変わらない限り関数内で使用されている変数など更新されません
よってuseCallbackを使う場合は基本的に第二引数に関数内で使われている関数外で定義された変数を記述する必要があります
今回は次のようにすれば良いはずです

  const radioBtnCallback = useCallback((idx, e) => {
    console.log("Show Photo: " + idx)

    //ここのcellcsvsの値がから配列になってしまっている。
    console.log(cellcsvs);
    console.log(1010101010101);
    idx = Number(idx);
  }, [cellcsvs])

Comments

[j.f15]

回答ありがとうございます。
無事に値を取得することが出来ました。
reactの理解が浅かったので解説本当に助かります。
ご丁寧にソースコードも書いてくださって理解しやすかったです。