Zenn
Open4

TS, Reactのミスのメモ

ひげひげ

useStateで更新した直後に取得したい

データを保存して、そのデータを元にurlを生成したかった。データとurlのuseStateを作成し、useEffect内部でstorageの保存と呼び出しを行い、useStateで変数urlを更新した。

    const [google_input, setGoogleInput] = useState<GoogleFormInput>({
        report_type: "作業開始報告",
        duration: "",
        todo: "",
        others: "",
    });
    const [url, setUrl] = useState<string>("http://example.com/");

    useEffect(() => {
        async function fetchDuration() {
            const now = new Date();
            const working_status = await workingStatus();
            const report_type = working_status.is_working ?  "作業終了報告" : "作業開始報告"
            const duration: Duration = await getDurationTime(now, working_status);

            await storeDurationToGoogleFormInput(duration) // storageに保存
            setGoogleInput((prev) => ({
                ...prev,
                report_type,
                duration: `${duration.duration_start} - ${duration.duration_end}`,
            })) //  <- useStateでデータ保存して画面の値を更新

            const updated_google_input = await getGoogleFormInput(); // <-storageからデータ取得
            const url = createFilledUrl(updated_google_input)
            setUrl(url); // useStateで画面のurlの値を更新
        }
        fetchDuration();
    }, []);
ひげひげ

ハンドラーにasync関数を指定していい

なんとなくハンドラーにasyncを指定してはいけない気がしていたがOK。

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setTodo(e.target.value)
    }


    return (
        <>
            <div className={styles.informationContainer}>
                <form className={styles.formContainer}>
                    <input
                        type="text"
                        value={todo}
                        onChange={handleChange}
                    />

// 略