teratail
回答率
85.47%
質問するログイン新規登録
トップTypeScriptに関する質問react useStateの非同期|intervalで書き換えを行うと再描画されない問題

編集履歴

質問編集履歴

2

ソースコードのアップデート

2022/11/15 09:00

投稿

yutadd
yutadd

スコア18

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,13 @@
2
2
  setIntervalで5秒毎に非同期でAPIからJSONでデータを取得し、それを要素に変換して表示しているのですが、再描画がされず、困ってます。
3
3
  デバッグ用にforceUpdateというboolean型のstateを使い、強制再描画＆更新の確認をしてみたところ、初期値falseが一度trueに書き換わり、描画され、それ以降二度とtrueに戻りません。
4
4
  ```typescript
5
+ import React, { useState, useEffect, useContext, useReducer } from "react";
6
+ import CommentCard from "./CommentCard";
7
+ import "./Home.css";
8
+ import { Context } from "./App";
9
+
10
+ import Box from "@mui/material/Box";
11
+ import { CommentSharp } from "@material-ui/icons";
5
12
 
6
13
  const update = (state: any, additionalElement: any) => {
7
14
  console.log("add↓");
@@ -24,16 +31,11 @@
24
31
  const promise = await fetch("/api/share/get/comments");
25
32
  const json = await promise.json();
26
33
  console.log(state.left);
27
- for (let a = 0; a < json.length; a++) {
34
+ for (var a = 0; a < json.length; a++) {
28
- let uid = json[a]["userID"];
29
- const prename = await fetch("/api/share/get/getuser?uid=" + uid, {
30
- mode: "cors",
31
- });
32
- const user = await prename.json();
33
35
  setState(
34
36
  <CommentCard
35
37
  key={json[a]["commentID"]}
36
- user={user["name"]}
38
+ user={json[a]["username"]}
37
39
  json={json[a]}
38
40
  />
39
41
  );
@@ -41,7 +43,7 @@
41
43
  };
42
44
  getter();
43
45
  setforceUpdata(forceUpdate ? false : true);
44
- }, 1000);
46
+ }, 5000);
45
47
  }, []);
46
48
 
47
49
  return (
@@ -56,5 +58,6 @@
56
58
  );
57
59
  }
58
60
  export default Home;
61
+
59
62
  ```
60
63
 
TypeScriptReact.js

1

問題をより正確に書き換えた

2022/11/15 08:24

投稿

yutadd
yutadd

スコア18

test CHANGED
@@ -1 +1 @@
1
- react useStateの更新に関する問題
1
+ react useStateの非同期|intervalで書き換えを行うと再描画されない問題
test CHANGED
@@ -1,50 +1,56 @@
1
1
  ### 前提
2
- setIntervalで5秒毎にAPIからJSONでデータを取得し、それを要素に変換して表示したいのですが、初回までに取得された要素は表示されるのですが、2回目以降に取得されたデータをsetLeftで更新しても、表示されません
2
+ setIntervalで5秒毎に非同期でAPIからJSONでデータを取得し、それを要素に変換して表示しているのですが、再描画がされず、困ってます。
3
- 新しいデータがあるたびにきちんと表示されるようにしたいのですが、どうすればよいでしょうか？
3
+ デバッグ用にforceUpdateというboolean型のstateを使い、強制再描画＆更新の確認をしてみたところ、初期値falseが一度trueに書き換わり、描画され、それ以降二度とtrueに戻りません。
4
4
  ```typescript
5
+
6
+ const update = (state: any, additionalElement: any) => {
7
+ console.log("add↓");
8
+ console.log(additionalElement);
9
+ console.log("state");
10
+ console.log(state);
11
+ let _tmp = state;
12
+ _tmp.left.push(additionalElement);
13
+ return _tmp;
14
+ };
5
15
  function Home() {
6
- let comments: any;
7
- let userNames: string[] = [];
16
+ const [right, setRight] = useContext(Context);
8
- const [left, setLeft] = useState<JSX.Element[]>();
17
+ const [forceUpdate, setforceUpdata] = useState<boolean>(false);
18
+
9
- let _cards: JSX.Element[] = [];
19
+ const [state, setState] = useReducer(update, { left: [] });
20
+
10
21
  useEffect(() => {
11
22
  setInterval(() => {
23
+ const getter = async () => {
12
- fetch("/api/share/get/comments").then((promise) => {
24
+ const promise = await fetch("/api/share/get/comments");
13
- promise.json().then((json) => {
25
+ const json = await promise.json();
14
- comments = json;
26
+ console.log(state.left);
15
- for (let a = 0; a < json.length; a++) {
27
+ for (let a = 0; a < json.length; a++) {
16
- let uid = json[a]["userID"];
28
+ let uid = json[a]["userID"];
17
- fetch("/api/share/get/getuser?uid=" + uid, { mode: "cors" }).then(
29
+ const prename = await fetch("/api/share/get/getuser?uid=" + uid, {
18
- (prename) => {
19
- prename.json().then((user) => {
20
- userNames.push(user["name"]);
30
+ mode: "cors",
21
- });
31
+ });
22
- }
23
- );
24
- }
25
- });
26
- });
27
- }, 5000);
28
- setTimeout(() => {
29
- setInterval(() => {
30
- for (let i = 0; i < comments.length; i++) {
32
+ const user = await prename.json();
31
- _cards.push(
33
+ setState(
32
34
  <CommentCard
33
- key={comments[i]["commentID"]}
35
+ key={json[a]["commentID"]}
34
- user={userNames[i]}
36
+ user={user["name"]}
35
- json={comments[i]}
37
+ json={json[a]}
36
38
  />
37
39
  );
38
40
  }
41
+ };
39
- setLeft(_cards);
42
+ getter();
43
+ setforceUpdata(forceUpdate ? false : true);
40
- }, 5000);
44
+ }, 1000);
41
- }, 500);
42
45
  }, []);
46
+
43
47
  return (
44
48
  <>
45
49
  <Box sx={{ pt: "1vh" }} className="left">
46
- {left}
50
+ {state.left}
51
+ {forceUpdate ? "true" : "false"}
47
52
  </Box>
53
+
48
54
  <Box className="left">{right}</Box>
49
55
  </>
50
56
  );
TypeScriptReact.js