react useStateの非同期|intervalで書き換えを行うと再描画されない問題

Question

前提

setIntervalで5秒毎に非同期でAPIからJSONでデータを取得し、それを要素に変換して表示しているのですが、再描画がされず、困ってます。
デバッグ用にforceUpdateというboolean型のstateを使い、強制再描画＆更新の確認をしてみたところ、初期値falseが一度trueに書き換わり、描画され、それ以降二度とtrueに戻りません。

import React, { useState, useEffect, useContext, useReducer } from "react";
import CommentCard from "./CommentCard";
import "./Home.css";
import { Context } from "./App";

import Box from "@mui/material/Box";
import { CommentSharp } from "@material-ui/icons";

const update = (state: any, additionalElement: any) => {
  console.log("add↓");
  console.log(additionalElement);
  console.log("state");
  console.log(state);
  let _tmp = state;
  _tmp.left.push(additionalElement);
  return _tmp;
};
function Home() {
  const [right, setRight] = useContext(Context);
  const [forceUpdate, setforceUpdata] = useState<boolean>(false);

  const [state, setState] = useReducer(update, { left: [] });

  useEffect(() => {
    setInterval(() => {
      const getter = async () => {
        const promise = await fetch("/api/share/get/comments");
        const json = await promise.json();
        console.log(state.left);
        for (var a = 0; a < json.length; a++) {
          setState(
            <CommentCard
              key={json[a]["commentID"]}
              user={json[a]["username"]}
              json={json[a]}
            />
          );
        }
      };
      getter();
      setforceUpdata(forceUpdate ? false : true);
    }, 5000);
  }, []);

  return (
    <>
      <Box sx={{ pt: "1vh" }} className="left">
        {state.left}
        {forceUpdate ? "true" : "false"}
      </Box>

      <Box className="left">{right}</Box>
    </>
  );
}
export default Home;

Answer 1

userNamesや_cardsのような、関数コンポーネント内で普通に宣言した変数は、

• コンポーネントの描画ごとに初期化が行われる
• 非同期な読み書きを行う場合クロージャとなるので、非同期処理開始時の変数をキャプチャしてしまい、完了時に書き込んでも実質意味をなさない

などの事情がありますので、非同期実行の結果を入れるために使うことはできません。stateあるいはrefとしてください。

Comments

[yutadd]

すみません、指摘通り、
comments
usernamesを
stateに変更し、
コンソールヘ値を出力する変更を下記のように実装してみましたが、
描画されず、
コンソールへの出力：
(2) [{…}, {…}]
comments
[]
left
undefined

となっており、
commentsおよびleftが、正しく更新や初期化が行われていないか、アクセスできないです

コード：
function Home() {
const [right, setRight] = useContext(Context);
const [comments, setComments] = useState<any[]>([]);
const [userNames, setUserNames] = useState<string[]>([""]);
const [left, setLeft] = useState<JSX.Element[]>();

useEffect(() => {
console.log("start effect");
setInterval(() => {
fetch("/api/share/get/comments").then((promise) => {
promise.json().then((json) => {
console.log(json);
setComments(json);
let unames: string[] = [];
for (let a = 0; a < json.length; a++) {
let uid = json[a]["userID"];
fetch("/api/share/get/getuser?uid=" + uid, { mode: "cors" }).then(
(prename) => {
prename.json().then((user) => {
unames.push(user["name"]);
setUserNames(unames);
});
}
);
}
});
});
}, 5000);
setTimeout(() => {
setInterval(() => {
let _cards: JSX.Element[] = [];
console.log("comments");
console.log(comments);
console.log("left");
console.log(left);
for (let i = 0; i < comments.length; i++) {
_cards.push(
<CommentCard
key={comments[i]["commentID"]}
user={userNames[i]}
json={comments[i]}
/>
);
console.log(Object.is(_cards, left));
}
setLeft(_cards);
}, 5000);
}, 500);
}, []);

[maisumakun]

上に書いたように、非同期実行ではクロージャが変数を束縛してしまうので、setTimeoutの中のコールバックではstateであっても、参照が正しく行えません。

setLeftのほうは、なぜsetTimeoutやsetIntervalで囲んでいるのでしょうか。

[yutadd]

なるほど、非同期だとStateでも更新がうまくいかないんですね
非同期で5秒毎に[{"userID":"hogehoge","commentID":"7ff5b60cc4933c95e09508f1f3f3761fff0891c2972458982cef7c585e469cf5","file1":"none","text":"konnnitiwa","time":"11月 14, 2022","likes":0},{"userID":"hogehoge",..}]このようなJSONのデータをを取得して描画する方法がわかりません。。

ちなみに、1つ目のループでデータの取得を行い、
2つ目のループでデータの変換と描画する変数に登録を行っていました。その際、同時に変数にアクセスしないように、timeoutを500ミリ秒行ってずらしていました。

[maisumakun]

> その際、同時に変数にアクセスしないように、timeoutを500ミリ秒行ってずらしていました。

そんな配慮は必要ありません。Reactの標準的なやり方としては、fetchで取得・stateへのセットだけuseEffectで行って、stateにセットされたデータは「そのまま」描画する、という流れになります。stateが更新されれば再描画は自動で行われます。

[yutadd]

なるごど。
以下ようなシンプルな実装（コード1）に変更してみても、表示されないのはやはりおっしゃる通り、fetchが非同期実行なため初期の空データが入るからですかね？

そこで、少し改良して、２個めのfetch以下をコード２のようにしてみたのですが（コード2）、すると１つのみが表示されしまいました...left参照できないからですよね
どうすればAPIから取ってきたデータからもう一度APIへアクセスし、それらのデータをオブジェクトに変換し、描画できるんでしょうか...

コード１：
useEffect(() => {
let elements: JSX.Element[] = [];
setInterval(() => {
fetch("/api/share/get/comments").then((promise) => {
promise.json().then((json) => {
console.log(json);
for (let a = 0; a < json.length; a++) {
let uid = json[a]["userID"];
fetch("/api/share/get/getuser?uid=" + uid, { mode: "cors" }).then(
(prename) => {
prename.json().then((user) => {
elements.push(
<CommentCard
key={json[a]["commentID"]}
user={user["name"]}
json={json[a]}
/>
);
});
}
);
}
setLeft(elements);
});
});
}, 5000);
}, []);

コード２
(prename) => {
prename.json().then((user) => {
setLeft([
...(left as JSX.Element[]),
<CommentCard
key={json[a]["commentID"]}
user={user["name"]}
json={json[a]}
/>,
]);
});
}

[yutadd]

useReducerとかで追加処理を用意するのが最善ですかね

[yutadd]

変更>>質問をより正確に書き換えました

[maisumakun]

setforceUpdata(forceUpdate ? false : true);と非同期コールバック内で書いてしまうと、forceUpdateもキャプチャされた値なので、現在の値と全く関係ない値が残ってしまいます。

setforceUpdata(old => !old);と、現在の値を見て変更する関数を渡してください。

[maisumakun]

あと、updateで破壊的な変更を行っていますが、これを行うとReactで更新を認識できません（let _tmp = state;はオブジェクトのコピーを行いません）。

[yutadd]

すみません、そうでしたそうでした。
お、trueとfalseの値は交互に再描画されるようになりました。
このsetforceUpdata((old) => !old);をいろいろな場所に配置してみたんですが、
asyncをつけたgetter関数のスコープにおいた場合、booleanの再描画がされました。が、
その中のfor文の中だと再描画が起こらないようです。

[yutadd]

お陰様で正しく描画が行われるようになりました！
ご指摘をいただいた破壊的変更をきちんと加えていなかったこと、値が更新される前のstateの値を参照していたこと、関数コンポーネントの変数を参照していたことなどが等が原因でした。
function Home() {
const [right, setRight] = useContext(Context);
const [tmp_l, setTmp_l] = useState<JSX.Element[]>([<></>]);
useEffect(() => {
setInterval(() => {
const getter = async () => {
const promise = await fetch("/api/share/get/comments");
const json = await promise.json();
console.log(json.length);
for (let a = 0; a < json.length; a++) {
setTmp_l((previous: JSX.Element[] | undefined) => {
let tmp: JSX.Element[] = [...(previous as JSX.Element[])];
console.log(json[a]);
tmp.push(
<CommentCard
key={json[a]["c"]["commentID"]}
user={json[a]["username"]}
json={json[a]}
/>
);
return tmp;
});
}
};
getter();
}, 5000);
}, []);

return (
<>
<Box sx={{ pt: "1vh" }} className="left">
{tmp_l}
</Box>

<Box className="left">{right}</Box>
</>
);
}
export default Home;