Question

一切正常。然后我决定为我的项目使用 MAterial UI 图标，即 SearchIcon。然后它开始向我展示这个错误：

<块引用>

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用中拥有多个 React 副本有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

即使我还没有使用任何钩子。我已经谷歌搜索，但还没有找到任何解决方案。预先感谢您的帮助！！下面是我的代码

import React from 'react'
import '../styles/Header.css'
import SearchIcon from '@material-ui/icons/Search';

function Header() {
    return (
        <div className="header">
            <img
                className="header__logo"
                src='https://pngimg.com/uploads/amazon/amazon_PNG11.png' alt='amazon-logo'
            />

        <div className="header__search">
            <input type="text" className="header__searchInput" />
            <SearchIcon className="header__searchIcon" />
        </div>

        <div className="header__nav">
            <div className="header__option">
                <span className="header_optionLineOne">
                    Hello, Guest
                </span>
                <span className="header_optionLineOne">
                    Hello, Sign In
                </span>
            </div>
            <div className="header__option">
            <span className="header_optionLineOne">
                    Returns
                </span>
                <span className="header_optionLineTwo">
                    Orders
                </span>
            </div>

            <div className="header__option">
                <span className="header_optionLineOne">
                    Your
                </span>
                <span className="header_optionLineTwo">
                    Prime
                </span>
            </div>
        </div>

        </div>
    )
}

export default Header

Material UI 图标给出错误：无效的钩子调用。 Hooks 只能在函数组件内部调用

0 个答案: