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

Question

前提・実現したいこと

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

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

をIDベースで、
returnして、

 <div className={access}>
            <dl>
              <dt>
                <span>サイト訪問数</span>
              </dt>
              <dd id="users"></dd>
            </dl>
          </div>
          <div className={access}>
            <dl>
              <dt>
                <span>ページ閲覧数</span>
              </dt>
              <dd id="pageviews"></dd>
            </dl>
          </div>

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

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

エラーメッセージ

該当のソースコード

import React, { useState, useEffect } from "react";
import { Spin, Button, Icon, DatePicker } from "antd";
import moment from "moment";

const { gapi } = window;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD";

const Aaa = () => {
  const [state, setState] = useState({
    viewId: "",
    clientId: "",
    startDate: "2222-22-01",
    endDate: "2222-22-01",
    users: "ga:users",
    pageviews: "ga:pageviews",
  });
  const [signedIn, setSignedIn] = useState(false);

  useEffect(() => {
    if (!settingData) return;
    const { gaConfig } = JSON.parse(settingData.setting.values);
    const { viewId, clientId } = JSON.parse(gaConfig);
    const f = async () => {
      setState({
        ...state,
        viewId,
        clientId,
      });
    };
    f();
  }, [settingData]);

  useEffect(() => {
    if (!state.clientId) return;
    const f = async () => {
      console.log(state.clientId);
      gapiLoad();
    };
    f();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state.clientId]);

  // Query the API and print the results to the page.
  useEffect(() => {
    if (!signedIn) return;
    const f = async () => {
      await sendQuery();
    };
    f();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [signedIn, state.startDate, state.endDate]);

  if (settingError) {
    const error = settingError;
    return `Error! ${error}`;
  }

  const sendQuery = async () => {
    const arg = {
      path: "/v4/reports:batchGet",
      root: "https://analyticsreporting.googleapis.com/",
      method: "POST",
      body: {
        reportRequests: [
          {
            viewId: state.viewId,
            dateRanges: [
              {
                startDate: state.startDate,
                endDate: state.endDate,
              },
            ],
            metrics: [
              {
                expression: state.users,
              },
              {
                expression: state.pageviews,
              },
            ],
          },
        ],
      },
    };

    const res = await gapiRequest(arg).catch((err) => err);
    // invalid viewId
    if (res.result.error) {
      console.log(res.result.error);
      return;
    }
    // const formattedJson = JSON.stringify(res.result.reports[0], null, 2);
    const users = res.result.reports[0].data.totals[0].values[0];
    document.getElementById("users").textContent = users;
    const pageviews = res.result.reports[0].data.totals[0].values[1];
    document.getElementById("pageviews").textContent = pageviews;
  };

  const gapiLoad = async () => {
    gapi.load("auth2", async (signin2) => {
      gapi.signin2.render("google-signin-button", {
        onsuccess: (res) => {
          console.log(res);
          setSignedIn(true);
        },
        onfailure: (res) => {
          console.log(res.error);
          // setSignedIn(true)
        },
      });
      const res = await gapi.auth2
        .init({
          client_id: state.clientId,
          scope: "https://www.googleapis.com/auth/analytics.readonly",
        })
        .then((res) => res)
        .catch((err) => err);
      if (res.error) {
        console.log(res.error);
        return;
      }
    });
  };

  const onSignIn = async () => {
    const auth = gapi.auth2.getAuthInstance();
    const res = await auth.signIn().catch((err) => err);
    if (res.error) {
      console.log(res.error);
      return;
    }
    setSignedIn(true);
  };

  const onSignOut = () => {
    const auth = gapi.auth2.getAuthInstance();
    auth.signOut();
    setSignedIn(false);
  };

  const gapiRequest = (arg) =>
    new Promise((resolve, reject) => {
      gapi.client.request(arg).then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      );
    });

  const onChange = (date, dateString) => {
    const [startDate, endDate] = dateString;
    setState({ ...state, startDate, endDate });
  };

  return (
    <Spin spinning={settingLoading} tip="Loading...">
      <div id="google-signin-button"></div>
      {!signedIn ? (
        <Button icon="google" onClick={onSignIn}>
          SignIn
        </Button>
      ) : (
        <Button icon="google" onClick={onSignOut}>
          SignOut
        </Button>
      )}
      <div className={"container"}>
        <div className={"row"}>
          <div className={analysisPeriod}>
            <div>
              <div className={analysisTitle}>
                <Icon type="bar-chart" />
                <span style={{ marginLeft: "2%" }}>アクセス解析</span>
              </div>
              <div className={analysisDate}>
                <RangePicker
                  onChange={onChange}
                  defaultValue={[
                    moment("2019-10-31", dateFormat),
                    moment("2019-10-31", dateFormat),
                  ]}
                />
              </div>
            </div>
          </div>
          <div className={access}>
            <dl>
              <dt>
                <span>サイト訪問数</span>
              </dt>
              <dd id="users"></dd>
            </dl>
          </div>
          <div className={access}>
            <dl>
              <dt>
                <span>ページ閲覧数</span>
              </dt>
              <dd id="pageviews"></dd>
            </dl>
          </div>
        </div>
      </div>
    </Spin>
  );
};

export default Aaa;

試したこと

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

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

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

Answer 1

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

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

Comments

[kaoru_tujimiya]

ありがとうございます！試してやってみます