【React】普通のDOMから仮想DOMに変更する方法

前提・実現したいこと

現在、Reactを使ってて普通のDOMで実装して、
以下の

react
1const users = res.result.reports[0].data.totals[0].values[0];
2    document.getElementById("users").textContent = users;
3const pageviews = res.result.reports[0].data.totals[0].values[1];
4    document.getElementById("pageviews").textContent = pageviews;

をIDベースで、
returnして、

react
1 <div className={access}>
2            <dl>
3              <dt>
4                <span>サイト訪問数</span>
5              </dt>
6              <dd id="users"></dd>
7            </dl>
8          </div>
9          <div className={access}>
10            <dl>
11              <dt>
12                <span>ページ閲覧数</span>
13              </dt>
14              <dd id="pageviews"></dd>
15            </dl>
16          </div>

として表示しているのですが、
これを仮想DOMで使いたい場合どういう実装をすればよろしいでしょうか？
お手数ですが、よろしくお願いいたします、

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

エラーメッセージ

該当のソースコード

react
1import React, { useState, useEffect } from "react";
2import { Spin, Button, Icon, DatePicker } from "antd";
3import moment from "moment";
4
5const { gapi } = window;
6const { RangePicker } = DatePicker;
7const dateFormat = "YYYY-MM-DD";
8
9const Aaa = () => {
10  const [state, setState] = useState({
11    viewId: "",
12    clientId: "",
13    startDate: "2222-22-01",
14    endDate: "2222-22-01",
15    users: "ga:users",
16    pageviews: "ga:pageviews",
17  });
18  const [signedIn, setSignedIn] = useState(false);
19
20  useEffect(() => {
21    if (!settingData) return;
22    const { gaConfig } = JSON.parse(settingData.setting.values);
23    const { viewId, clientId } = JSON.parse(gaConfig);
24    const f = async () => {
25      setState({
26        ...state,
27        viewId,
28        clientId,
29      });
30    };
31    f();
32  }, [settingData]);
33
34  useEffect(() => {
35    if (!state.clientId) return;
36    const f = async () => {
37      console.log(state.clientId);
38      gapiLoad();
39    };
40    f();
41    // eslint-disable-next-line react-hooks/exhaustive-deps
42  }, [state.clientId]);
43
44  // Query the API and print the results to the page.
45  useEffect(() => {
46    if (!signedIn) return;
47    const f = async () => {
48      await sendQuery();
49    };
50    f();
51    // eslint-disable-next-line react-hooks/exhaustive-deps
52  }, [signedIn, state.startDate, state.endDate]);
53
54  if (settingError) {
55    const error = settingError;
56    return `Error! ${error}`;
57  }
58
59  const sendQuery = async () => {
60    const arg = {
61      path: "/v4/reports:batchGet",
62      root: "https://analyticsreporting.googleapis.com/",
63      method: "POST",
64      body: {
65        reportRequests: [
66          {
67            viewId: state.viewId,
68            dateRanges: [
69              {
70                startDate: state.startDate,
71                endDate: state.endDate,
72              },
73            ],
74            metrics: [
75              {
76                expression: state.users,
77              },
78              {
79                expression: state.pageviews,
80              },
81            ],
82          },
83        ],
84      },
85    };
86
87    const res = await gapiRequest(arg).catch((err) => err);
88    // invalid viewId
89    if (res.result.error) {
90      console.log(res.result.error);
91      return;
92    }
93    // const formattedJson = JSON.stringify(res.result.reports[0], null, 2);
94    const users = res.result.reports[0].data.totals[0].values[0];
95    document.getElementById("users").textContent = users;
96    const pageviews = res.result.reports[0].data.totals[0].values[1];
97    document.getElementById("pageviews").textContent = pageviews;
98  };
99
100  const gapiLoad = async () => {
101    gapi.load("auth2", async (signin2) => {
102      gapi.signin2.render("google-signin-button", {
103        onsuccess: (res) => {
104          console.log(res);
105          setSignedIn(true);
106        },
107        onfailure: (res) => {
108          console.log(res.error);
109          // setSignedIn(true)
110        },
111      });
112      const res = await gapi.auth2
113        .init({
114          client_id: state.clientId,
115          scope: "https://www.googleapis.com/auth/analytics.readonly",
116        })
117        .then((res) => res)
118        .catch((err) => err);
119      if (res.error) {
120        console.log(res.error);
121        return;
122      }
123    });
124  };
125
126  const onSignIn = async () => {
127    const auth = gapi.auth2.getAuthInstance();
128    const res = await auth.signIn().catch((err) => err);
129    if (res.error) {
130      console.log(res.error);
131      return;
132    }
133    setSignedIn(true);
134  };
135
136  const onSignOut = () => {
137    const auth = gapi.auth2.getAuthInstance();
138    auth.signOut();
139    setSignedIn(false);
140  };
141
142  const gapiRequest = (arg) =>
143    new Promise((resolve, reject) => {
144      gapi.client.request(arg).then(
145        (res) => {
146          resolve(res);
147        },
148        (err) => {
149          reject(err);
150        }
151      );
152    });
153
154  const onChange = (date, dateString) => {
155    const [startDate, endDate] = dateString;
156    setState({ ...state, startDate, endDate });
157  };
158
159  return (
160    <Spin spinning={settingLoading} tip="Loading...">
161      <div id="google-signin-button"></div>
162      {!signedIn ? (
163        <Button icon="google" onClick={onSignIn}>
164          SignIn
165        </Button>
166      ) : (
167        <Button icon="google" onClick={onSignOut}>
168          SignOut
169        </Button>
170      )}
171      <div className={"container"}>
172        <div className={"row"}>
173          <div className={analysisPeriod}>
174            <div>
175              <div className={analysisTitle}>
176                <Icon type="bar-chart" />
177                <span style={{ marginLeft: "2%" }}>アクセス解析</span>
178              </div>
179              <div className={analysisDate}>
180                <RangePicker
181                  onChange={onChange}
182                  defaultValue={[
183                    moment("2019-10-31", dateFormat),
184                    moment("2019-10-31", dateFormat),
185                  ]}
186                />
187              </div>
188            </div>
189          </div>
190          <div className={access}>
191            <dl>
192              <dt>
193                <span>サイト訪問数</span>
194              </dt>
195              <dd id="users"></dd>
196            </dl>
197          </div>
198          <div className={access}>
199            <dl>
200              <dt>
201                <span>ページ閲覧数</span>
202              </dt>
203              <dd id="pageviews"></dd>
204            </dl>
205          </div>
206        </div>
207      </div>
208    </Spin>
209  );
210};
211
212export default Aaa;
213

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

Reactはstateの変更を受けてDOMのうち変更する必要のある箇所を検出して該当箇所のDOMを書き換えてくれます.

つまり何をすればいいかというと, この場合vanilla jsでDOM操作して結果を表示させている users と previews をstateとしてしまえばよくて, 関数コンポーネントを使っている雰囲気が見えるので useState でstateを何かしらから文字列として宣言して, users, previewsが取得されたタイミングでそれをsetStateすればいいかと思います
そしてそのstateをJSXに埋め込めば大丈夫です

投稿2020/05/19 09:24