类型错误：setOpenModal 不是函数

Question

我正在尝试制作一个登录模式弹出窗口，该弹出窗口将在单击导航栏内的按钮时显示。但是，我收到以下错误：

类型错误：setOpenModal 不是函数

即使在这里查看了许多线程，我也无法理解导致我的情况出现错误的原因。下面是我的代码：

Navbar.js：

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";
import Login from "./Login";

function Navbar() {

  const [openModal, setOpenModal] = useState(false);

  const showModal = () => {
    setOpenModal(true);
  };

  return (
    <nav className="navbar">
      <div className="nav-div">
        <Link to="/" className="nav-logo">
          <i class="fas fa-hamburger"></i>Hungermania
        </Link>
        <div className="nav-form">
          <form>
            <input
              className="nav-search"
              type="search"
              placeholder="Search for your favorite restaurant, cuisine or a dish"
            ></input>
            <button className="btn-search">Search</button>
          </form>
        </div>
        <ul>
          <li className="nav-item">
            <button className="login-btn nav-link" onClick={showModal}>
              Login
            </button>
            {openModal && <Login setOpenModal={setOpenModal} />}
          </li>
          <li className="nav-item">
            <button className="signup-btn nav-link">Sign Up</button>
          </li>
        </ul>
      </div>
    </nav>
  );
}

export default Navbar;

登录.js：

import React from "react";
import "./Login.css";

function Login({ setOpenModal }) {
  const hideModal = () => {
    setOpenModal(false);
  };
  return (
    <div className="modalBackground">
      <div className="modalContainer">
        <div className="titleclosebtn">
          <button onClick={hideModal}>&times;</button>
        </div>
        <div className="title">
          <h1>Login</h1>
        </div>
        <div className="body">
          <form>
            <label for="name">Name:</label>
            <input type="text" placeholder="Full Name" required />
            <br />
            <br />
            <label for="phone">Phone No:</label>
            <input type="number" placeholder="Phone No." required />
            <br />
            <br />
            <label for="email">Email Id:</label>
            <input type="email" placeholder="[email protected]" required />
            <br />
            <br />
            <div className="footer">
              <button type="submit" class="btn-signup">
                SIGN UP
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Login;

Answer 1

你的代码没有任何问题，所以可能是现金什么的。

重新启动服务器应该停止指责该错误。

通常，当发生这样的愚蠢错误时，我只是评论指责错误的部分，等待刷新并取消注释，这也有效，而不是总是重新启动服务器。

Answer 2

{openModal && <Login setOpenModal={setOpenModal} />}

这部分代码。你正在传递一个名为

setOpenModal

的道具，并且你正在传递

setOpenModal

。你不能传递你所在州的设置者。您可以使用 props 传递变量或函数。因此，创建一个函数，在该函数中您可以使用

setOpenModal

，然后像这样传递该函数：

const someFunction=(value)=>{
   setOpenModal(value);
}


{openModal && <Login whatEverName={someFunction} />}

Answer 3

请与供应商一起解决问题。 O meu estava abaixo do resolvi colocando fora do .

      <UserProvider>
          <ModalProvider>
            <OneOneProvider>
              <AuthProvider>
                {children}
              </AuthProvider>
            </OneOneProvider>
          </ModalProvider>
      </UserProvider>