如何将usestate（）初始值声明为null，然后稍后给它一个对象值？

Question

如图所示，我想向我的网页提示。起初，我希望没有显示警报。每当用户单击某些按钮时，我都想显示带有消息的成功警报（如果出现问题，错误警报）。我将调用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)

因此，有人可以告诉我如何告诉我们将来我会分配它的对象参数。还是我应该尝试以其他方式隐藏网站警报？这是代码..

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

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

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

此解决方案对我不起作用。

Answer 1

从您提到的错误的外观看来，您似乎正在使用Typescript。

实现预期结果的一种方法是使用。

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);

Answer 2

您可以在下方进行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);

Answer 3

您需要声明您的USESTATE的

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

另一种选择是使用未定义的

const [alert, setAlert] = useState<{ msg: any; type: any } | undefined>();

希望对您有所帮助。

Answer 4

有2种解决方案：

1: useState(null as any)
2: useState({ msg: any, type: any })