すべてのカテゴリ

React で変数の更新を監視するには？React で変数の値が更新された場合、その変数を使った表示を更新するのは、ステートで監視すれば良いので簡単です。しかし、変数が更新された際に、その変数を使って別の操作をする場合の記述方法を紹介します。基本はステート管理React でデータの更新に合わせて、表示データを更新するには、ステートを使って管理するのが基本です。 今回の課題は、Vue の公式チュートリアル（英語版）のステップ１０を基にしています。この課題は、「JSON placeholder」と呼ばれるサイトから、 ID を基にしたデータを取得して表示する物です。ボタンがクリックされる度に ID を更新して、それに伴うデータを取得して表示するというのが課題です。一番シンプルなのは、ボタンがクリックされたイベントを検出して、その際に一緒にそれに対応するデータを取得して表示データの更新を行うという方法です。この方法を使う場合、これ迄のステートを使った、データ管理を行えば実現可能です。import React, { useEffect, useState } from "react";import "./styles/step10.css";interface TodoData {  userId: number;  id: number;  title: string;  completed: boolean;}export default function Step10(): JSX.Element {  const [todoId, setTodoId]: [    number