자체 npm 패키지에서 react useEffect 관련 문제

자체 npm 패키지에서 react useEffect 관련 문제

우리는 자체 npm패키지를 만들었고 나는 지금 타임아웃 경계태세를 만들고 있다.제대로 작동하려면 useIffect 안에 넣어야 하는데 action.development.js:1465 무수집 오류: 잘못된 후크 호출. .

npm 패키지에 있는 컴포넌트의 파일은 타이프릭으로 되어 있지만, 나는 그것이 문제라고 생각하지 않는다. .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 파일에 사용할 구성 요소를 가져오십시오.나는 10개 정도의 부품을 만들었지만 이 부품 외에는 그 중 어떤 부품에도 후크를 사용하지 않았다.

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 구성 요소인 npm-package에서 그것을 원한다.

콘솔의 전체 오류 메시지:

검색되지 않은 오류:잘못된 후크 호출.후크는 기능 구성 요소의 신체 내부에서만 호출할 수 있다.이는 다음 이유 중 하나로 발생할 수 있다.

1. 리액트 및 렌더러 버전이 일치하지 않을 수 있음(예: 리액트 DOM)
2. 후크의 규칙을 어기고 있을지도 몰라
3. 같은 앱에 반응 복사본이 두 개 이상 있을 수 있음
   참조...이 문제를 디버그하고 해결하는 방법에 대한 팁을 참조하십시오.

resolveDispatcher(react.development.js:1465)
Object.useEffect (react.development.js:1508)
TimeOutAlert(TimeOutAlert.js:14)
at lenderWithHooks (react-dom.development.js:14803)
한창일 때IndetimateComponent(react-dom.development.js:17482)
시작 시(react-dom.development.js:18596)
HTMLUnknownElement.Callback(react-dom.development.js:188)에서
오브에에.)7가가CallbackDev(react-dom.development.js:237)
가드 출출출 시출 at백(react-dom.development.js:292)
에서 beginWork$1(react-dom.development.js:23203)

참조URL: https://stackoverflow.com/questions/64927160/problem-with-react-useeffect-in-own-npm-package