3

我们已经制作了自己的 npm-package，我现在正在处理超时警报。为了让时间正常工作，我需要将它放在 useEffect 中，但出现错误：react.development.js:1465 Uncaught Error: Invalid hook call。.

npm 包中组件中的文件在 typescript 中，但我认为这不是问题所在。.tsx：

import * as React from "react";

/**
 * @param {string} close_button_title default "Stäng"
 * @param {"top" | "bottom"} alert_position fixes the alert to bottom och top
 * @param {"warning" | "success" | "danger" | "error"} alert_type success as default
 * @param {any} alert_text plain text or html elements whit text, if empty/null/false the Alert is not shown
 * @param {any} set_alert_text the set state (hook) for alert_test (ex: setAlertText), must be right to close alert both whit timeout and the close btn
 * @param {boolean} alert_inline used to get alert message inline in modal
 */

const TimeOutAlert = (props: {
    close_button_title: string;
    alert_position?: "top" | "bottom";
    alert_type?: "warning" | "success" | "danger" | "error";
    message_wrapper_id?: string;
    alert_text: any;
    set_alert_text: any;
    alert_inline?: boolean;
}) => {
    const {
        close_button_title = "Stäng",
        alert_position = "top",
        alert_type = "success",
        message_wrapper_id = null,
        alert_text,
        set_alert_text,
        alert_inline = false,
    } = props;

    React.useEffect(() => {
        if (alert_text) {
            setTimeout(() => {
                set_alert_text("");
            }, 15 * 1000);
        }
    }, [alert_text]);

    let alertClasses = `message__alert__fixed--${alert_position}`;
    if (alert_inline) {
        alertClasses = "message__alert--inline";
    }

    if (alert_text) {
        return (
            <div
                className={`message__alert--${alert_type} ${alertClasses}`}
                id={message_wrapper_id}
            >
                {close_button_title && (
                    <button
                        className="icon icon--140 button--icon message__alert__button__close"
                        title={close_button_title}
                        onClick={() => set_alert_text("")}
                    >
                        close
                    </button>
                )}
                {alert_text}
            </div>
        );
    }
    return null;
};

export default TimeOutAlert;

索引.ds

import TimeOutAlert from "./TimeOutAlert";
import OneMorefrom "./OneMore";
import Some "./Some";
import Else from "./Else";

export {
    TimeOutAlert,
    OneMore,
    Some,
    Else,
};

如果我删除 useEffect，它可以工作，但超时不会正常工作。当我使用包时，我会在我的 jsx 文件或 tsx 文件中导入我不想使用的组件。我已经制作了十个左右的组件，但除了这个之外，我没有在其中任何一个中使用过钩子。

我在哪里使用组件 App.jsx：

import React, { useState } from "react";
import { TimeOutAlert } from "our-npm-package";

export default () => {
    const [message, setMessage] = useState("Alert meddelande");

    return (
        <>
        <TimeOutAlert alert_text={message} set_alert_text={setMessage}  />

我在导入这个 npm 包的主要项目中使用反应钩子，所以我通常知道问题出在哪里，但我不知道它现在不起作用的方式。我通常不使用打字稿，它只是在 npm 包中使用它来获得智能感知，但我仍然认为它的反应就是问题所在。但我可能是错的。

编辑：

这是导致错误的 useEffect ， useState 抛出相同的错误（试图使用它来更改警报类）。

我在多个项目中使用过这种超时，这就是为什么我想要在我们的 react-components npm-package 中使用它。

控制台中的完整错误消息：

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

  1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
  2. 您可能违反了 Hooks 规则
  3. 您可能在同一个应用程序中拥有多个 React 副本，
    请参阅 ... 了解有关如何调试和修复此问题的提示。

在 resolveDispatcher (react.development.js:1465)
在 Object.useEffect (react.development.js:1508)
在 TimeOutAlert (TimeOutAlert.js:14)
在 renderWithHooks (react-dom.development.js:14803)
在 mountIndeterminateComponent (react -dom.development.js:17482)
在 beginWork (react-dom.development.js:18596)
在 HTMLUnknownElement.callCallback (react-dom.development.js:188)
在 Object.invokeGuardedCallbackDev (react-dom.development.js: 237)在 beginWork$1 (react-dom.development.js:23203)
的 invokeGuardedCallback (react-dom.development.js:292 )

4

0 回答 0