React useState实现登录弹窗可打开但无法关闭的问题排查

问题描述 #

我正在制作电商网站的登录弹窗，将弹窗组件关联到Navbar组件上，点击登录按钮可正常打开弹窗，但点击弹窗内的关闭图标无法关闭弹窗。

我在App.jsx中使用useState钩子管理showLogin状态，初始值为false，并将setShowLogin作为props传递给Navbar和LoginPopup组件，相关代码如下：

Navbar组件代码 #

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

const Navbar = ({setShowLogin}) => {

  const [menu, setMenu] = useState("home");

  return (
    <div className='navbar'>
      <img src={assets.logo} alt="" className='logo' />
      <ul className="navbar-menu">
        <Link to='/' onClick={()=>setMenu("home")} className={menu==="home"?"active":""}>home</Link>
        <a href='#explore-menu' onClick={()=>setMenu("menu")} className={menu==="menu"?"active":""}>menu</a>
        <a href='#app-download' onClick={()=>setMenu("mobile-app")} className={menu==="mobile-app"?"active":""}>mobile-app</a>
        <a href='#footer' onClick={()=>setMenu("contact-us")} className={menu==="contact-us"?"active":""}>contact us</a>
        <div className="navbar-right">
          <img src={assets.search_icon} alt="" />
          <div className="navbar-search-icon">
            <img src={assets.basket_icon} alt="" />
            <div className="dot"></div>
          </div>
          <button onClick={()=>setShowLogin(true)}>sign in</button>
        </div>
      </ul>
    </div>
  )
}

export default Navbar

App组件代码 #

import React, { useState } from "react";
import Navbar from "./components/Navbar/Navbar";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home/Home";
import Cart from "./pages/Cart/Cart";
import PlaceOrder from "./pages/PlaceOrder/PlaceOrder";
import Footer from "./components/Footer/Footer";
import LoginPopup from "./components/LoginPopup/LoginPopup";

const App = () => {

  const [showLogin, setShowLogin] = useState(false);

  return (
    <>
    {showLogin?<LoginPopup setShowLogin={setShowLogin} />:<></>}
      <div className="app">
        <Navbar setShowLogin={setShowLogin} />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/cart" element={<Cart />} />
          <Route path="/order" element={<PlaceOrder />} />
        </Routes>
      </div>
      <Footer />
    </>
  );
};

export default App;

LoginPopup组件代码 #

import React, { useState } from 'react'
import './LoginPopup.css'
import { assets } from '../../assets/assets';

const LoginPopup = (setShowLogin) => {

    const [currState, setCurrState] = useState("Sign Up");

  return (
    <div className='login-popup'>
        <form className="login-popup-container">
            <div className="login-popup-title">
                <h2>{currState}</h2>
                <img onClick={()=>setShowLogin(false)} src={assets.cross_icon} alt="" />
            </div>
        </form>
    </div>
  )
}

export default LoginPopup

我对照教程检查过但未发现问题，请问我哪里出错了？

问题解决 #

错误出在LoginPopup组件的参数接收方式上：

React组件的props是一个对象，你当前直接写(setShowLogin)，意味着把整个props对象赋值给了setShowLogin变量，此时调用setShowLogin(false)实际上是在调用一个对象，而不是真正的状态更新函数。

你需要用对象解构的方式来获取props中的setShowLogin函数，修改后的LoginPopup组件代码如下：

import React, { useState } from 'react'
import './LoginPopup.css'
import { assets } from '../../assets/assets';

// 这里用解构语法获取props中的setShowLogin
const LoginPopup = ({setShowLogin}) => {

    const [currState, setCurrState] = useState("Sign Up");

  return (
    <div className='login-popup'>
        <form className="login-popup-container">
            <div className="login-popup-title">
                <h2>{currState}</h2>
                <img onClick={()=>setShowLogin(false)} src={assets.cross_icon} alt="" />
            </div>
        </form>
    </div>
  )
}

export default LoginPopup

这样修改后，点击关闭图标时就能正确调用状态更新函数，将showLogin设为false，从而关闭弹窗。

内容的提问来源于stack exchange，提问作者Vaishnavi