جاوااسکریپت - چگونه مقدار اولیه useState() را به صورت null اعلام کنیم و سپس بعداً یک مقدار شیء به آن بدهیم؟

همانطور که در تصویر مشاهده میشود، من میخواهم یک هوک state در ریاکت برای هشدار وبسایتم تعریف کنم. در ابتدا، میخواهم هیچ هشداری نمایش داده نشود. و هر زمان که کاربر روی دکمهای کلیک کرد، میخواهم یک هشدار موفق با پیامی نمایش داده شود (هشدار خطا اگر چیزی اشتباه باشد). برای انجام این کار تابع showAlert را با پیام و نوع به عنوان پارامتر تابع فراخوانی میکنم. به همین دلیل ممکن است بیش از یک نوع هشدار وجود داشته باشد. بنابراین، این شیء هشدار را ایجاد کردهام و هوک را با مقدار اولیه "NULL" متصل کردهام. اما ویرایشگر به من این خطا را میدهد.

Argument of type '{ msg: any; type: any; }' is not assignable to parameter of type 'SetStateAction<null>'. Object literal may only specify known properties, and 'msg' does not exist in type '(prevState: null) => null'.ts(2345)

پس، آیا کسی میتواند به من بگوید چگونه میتوانم به useState پارامترهای شیءای که بعداً به آن اختصاص میدهم را بگویم؟ یا باید سعی کنم هشدار وبسایت را به روش دیگری مخفی کنم؟ این هم کد است..

const [alert, setAlert] = useState(null);

const showAlert = (message, type) => {
    setAlert({
        msg: message,
        type: type,
    });

    setTimeout(() => {
        setAlert(null);
    }, 2000);

این راه حل برای من کار نمیکند.

پاسخ شماره ۱

با توجه به خطایی که ذکر کردید، به نظر میرسد شما از تایپاسکریپت استفاده میکنید.

یکی از راههای رسیدن به نتیجه مطلوب استفاده از ژنریکها است.

const [alert, setAlert] = useState<{
  msg: string;
  type: "success" | "error";
} | null>(null);

علاوه بر این، شما میتوانید با اضافه کردن یک enum و یک نوع، خوانایی را بهبود بخشید.

enum AlertType {
  Success,
  Error,
}

type Alert = {
  msg: string;
  type: AlertType;
}

const [alert, setAlert] = useState<Alert | null>(null);

پاسخ شماره ۲

شما میتوانید از روش زیر برای نوع useState استفاده کنید

type AlertType = {
 msg: string;
 type: string; // you can specify enum also
}

const [alert, setAlert] = useState<AlertType|null>(null);

const showAlert = (message, type) => {
    setAlert({
        msg: message,
        type: type,
    });

    setTimeout(() => {
        setAlert(null);
    }, 2000);