javascript - 如何将textarea的内容设置为使用useEffect之前保存的内容

Question

我正在尝试使用 React 制作记事本。我想在文本区域输入文本并保存。当页面重新打开时，我希望保存的文本保留在文本区域中。

我正在尝试使用 react-hook-form 但我被困在 useEffect 函数中。我想在 useEffect 函数中设置 textarea

document.getElementById("memoTextarea").value = memo; 

但是这条线给了我一个错误。

反正有没有代替声明？

下面是我的代码：

import { IonPage, IonContent, IonHeader, IonToolbar, IonTitle, IonItem, IonItemDivider, IonTextarea, IonButton, IonCard, IonLabel, IonSegment, IonSegmentButton} from '@ionic/react';
import React, { memo, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import './Main.scss';


const Main: React.FC = () => {
    const { handleSubmit, register } = useForm();
    const onSubmit = (memo: any) =>  console.log(memo);
    
    useEffect(() => {
        let x = document.getElementById("memoTextarea");
        x = memo;
    },[memo]);

    return (

        <IonPage className="MainPage">
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Memo pad</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonCard>
                    <form className="memo" onSubmit={handleSubmit(onSubmit)}>
                        <IonItemDivider><IonLabel>Memo</IonLabel></IonItemDivider>          
                        <IonItem>
                            <IonTextarea id="memoTextarea" name="memoTextarea" rows={28} ref={r => register(r)} />
                        </IonItem>
                        <IonButton type="submit" fill="solid">Save</IonButton>
                    </form>
                </IonCard>
            </IonContent>
        </IonPage>)
}

export default Main;