Question

我正在创建一个带有FAQ页面的应用程序，并且在努力在我的应用程序上安装语义UI时遇到了此问题。我知道，傻瓜。在我尝试一些npm安装和更新之前，这工作得很好。我试过重新安装nodejs，开始一个新的react项目，然后复制粘贴所有代码，还原我的提交，但都无济于事。我正在使用Visual Studio 2019并创建了一个ASP.NET Core Web应用程序C＃Reactjs项目btw。

错误消息：

这是错误消息：错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：1.您可能使用了不匹配的React和渲染器版本（例如React DOM）2.您可能违反了《胡克规则》 3.您可能在其中包含多个React版本相同的应用程序。有关如何调试和解决此问题的提示，请参见reactjs.org/link/invalid-hook-call。

我真的不知道问题出在哪里。我收到一个无效的挂接调用错误，但已检查。

我有相同版本的React和React DOM（17.0.1）

我没有违反任何挂钩规则。这是我的钩子：

function FAQdata({ faq }) {
const [open, setOpen] = useState(false);

return (
    <div className="faq"> 
        <a onClick={() => setOpen(!open)} aria-controls={faq.id} aria-expanded={open} type="button">
            <div className="sporsmaal">
                {faq.sporsmaal}
            </div>
        </a>
        <Collapse in={open}>
        <div className="svar" id={faq.id}>
            {faq.svar}
            </div>
        </Collapse>
    </div>
    );
}

我在同一应用中只有一个React：

npm ls react
thisuser@ C:\Users\thisuser
`-- react-bootstrap@1.4.0
  +-- @restart/context@2.1.4
  | `-- react@17.0.1 deduped
  +-- @restart/hooks@0.3.25
  | `-- react@17.0.1 deduped invalid
  +-- prop-types-extra@1.1.1
  | `-- react@17.0.1 deduped
  +-- react-dom@17.0.1
  | `-- react@17.0.1 deduped
  +-- react-overlays@4.1.1
  | `-- react@17.0.1 deduped
  +-- react-transition-group@4.4.1
  | `-- react@17.0.1 deduped
  +-- react@17.0.1
  `-- uncontrollable@7.1.1
    `-- react@17.0.1 deduped

使用npm ls反应时，我收到此错误信息：

npm : npm ERR! code ELSPROBLEMS

和

npm ERR! invalid: react@17.0.1 C:\Users\thisuser\node_modules\react

错误消息中显示的代码段是这样的：

//Faq is a controller 'FaqController.cs'
//HentAlle is a method in the controller which gets information from a database
 axios.get('Faq/HentAlle')
            .then(res => {
                const faqs = res.data;
                this.setState({ faqs });
            })

这是FAQ.js

import React, { Component, useState } from 'react';
import axios from 'axios';
import Collapse from 'react-bootstrap/Collapse';
import Button from 'react-bootstrap/Button';


export class FAQ extends Component {
    static displayName = FAQ.name;

    constructor(props) { 
        super(props);

        this.state = {
            faqs: [], 
            //setFaqs: []
        };
    }

    componentDidMount() {
        axios.get('Faq/HentAlle')
            .then(res => {
                const faqs = res.data;
                this.setState({ faqs });
            })
    }

    render() { 
        const faqItem = this.state.faqs.map((faq) =>
            <dl key={faq.id}>
                <FAQdata faq={faq} />
            </dl>
        );

        
        return (
            <div className="faqs">
                {faqItem}
            </div>
        );
    }
}    

function FAQdata({ faq }) {
    const [open, setOpen] = useState(false);

    return (
        <div className="faq"> 
            <a onClick={() => setOpen(!open)} aria-controls={faq.id} aria-expanded={open} type="button">
                <div className="sporsmaal">
                    {faq.sporsmaal}
                </div>
            </a>
            <Collapse in={open}>
            <div className="svar" id={faq.id}>
                {faq.svar}
                </div>
            </Collapse>
        </div>
        );
}

我真的不知道如何解决此问题，因为每次我在Package Manager控制台中运行某项命令时，都会不断出错。

无效的挂机呼叫，但不是真的

0 个答案: