Блог

Я застрял на предупреждении о недопустимом крючке. Это зависимость от третьей стороны, которая также затрудняет контроль. Но вот код, который вызывает проблему,

 export class Component {
    constructor() {
        this._initReact();
    }
    _initReact(displayName) {
        const component = React.forwardRef((props = {}, ref) => {
            const _a = Object.assign(Object.assign({}, this._props), props), { className, container, label, title, tag = 'div' } = _a, styleProps = __rest(_a, ["className", "container", "label", "title", "tag"]);
            // set up component state via useState hook
            const [, setId] = React.useState(this._uuid);
            // subscribe to svg replacement via useEffect hook
            React.useEffect(() => {
                const onSvgReplaced = () => {
                    setId(this._uuid);
                };
                this._svgReplaced.connect(onSvgReplaced);
                // specify cleanup callback as hook return
                return () => {
                    this._svgReplaced.disconnect(onSvgReplaced);
                };
            });
            // make it so that tag can be used as a jsx component
            const Tag = tag;
            // ensure that svg html is valid
            if (!(this.svgInnerHTML amp;amp; this.svgReactAttrs)) {
                // bail if failing silently
                return React.createElement(React.Fragment, null);
            }
            const svgComponent = (React.createElement("svg", Object.assign({}, this.svgReactAttrs, { dangerouslySetInnerHTML: { __html: this.svgInnerHTML }, ref: ref })));
            if (container) {
                Private.initContainer({ container, className, styleProps, title });
                return (React.createElement(React.Fragment, null,
                    svgComponent,
                    label));
            }
            else {
                return (React.createElement(Tag, { className: classes(className, LabIconStyle.styleClass(styleProps)) },
                    svgComponent,
                    label));
            }
        });
        component.displayName = `LabIcon_${displayName}`;
        return component;
    }
}
 

В этой функции useState и useEffect — это то, откуда поступают предупреждения ?
Любые предложения, чтобы пройти мимо этого, будут большим подспорьем.

Похоже, ты используешь LabIcon компонент, да? https://github.com/jupyterlab/jupyterlab/blob/master/packages/ui-components/src/icon/labicon.tsx#L454

Это компонент класса, но useEffect useState крючки и могут использоваться только в компонентах функций и в других крючках: https://reactjs.org/warnings/invalid-hook-call-warning.html

Вы можете вызывать хуки только во время рендеринга компонента функции React:

Вызовите их на верхнем уровне в теле компонента функции.

Вызовите их на верхнем уровне в теле пользовательского крючка.