在 Navbar.jsx 中单击按钮时调用 setShowCart(true) 函数时出现错误

问题描述 投票：0回答：1

这是我的代码，我在 Navbar.jsx 中调用 setShowCart(true) 函数时遇到错误。我不明白如何解决这个问题。

import React from 'react'
import Link from 'next/link';
import {AiOutlineShopping} from 'react-icons/ai';
import { Cart } from '.';


const Navbar = ({ showCart, setShowCart }) => {
  return (
    <div className='navbar-container'> 
    <p className='logo'>
      <Link href="/">JSM headphones</Link>

    </p>
    <button type="button" className="cart-icon" onClick={() => setShowCart(true)}>
      <AiOutlineShopping/>
      <span className='cart-item-qty'>1</span>
    </button>
    {showCart && <Cart />}
    </div>
  )
}

export default Navbar;


import React from 'react'
import Head from 'next/head';
import Navbar from './Navbar';
import Footer from './Footer';


const Layout = ({children}) => {
  return (
    <div className='layout'>
      <Head>
        <title>E-commerce  Store</title>
        </Head>
        <header>
          <Navbar/>
        </header>
        <main className='main-container'>
        {children}
        </main>
        <footer>
          <Footer/>
        </footer>

 
    </div>
  )
}

export default Layout

我的错误是 Navbar.jsx 函数的错误。任何人都可以建议我如何解决错误吗？错误如下截图所示 enter image description here

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
  <button type="button" className=... onClick={function} children=...>
                                              ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
html reactjs typescript web react-hooks
1个回答
0
投票

我阅读了您的代码，发现 

Layout
组件中有错误。

您需要将 

setShowCard
道具传递给 
Navbar
。

const Layout = ({children}) => {
  return (
    <div className='layout'>
      <Head>
        <title>E-commerce  Store</title>
        </Head>
        <header>
          {/* <Navbar/> */}
          <Navbar showCart={showCart} setShowCart={setShowCart} />
        </header>
        <main className='main-container'>
        {children}
        </main>
        <footer>
          <Footer/>
        </footer>

 
    </div>
  )
}

您需要将 

showCart
和 
setShowCart
定义为 
state
或从父级接收为 
props
。

第二种解决方案是使用 

Navbar
组件的默认 props。

import React from 'react'
import Link from 'next/link';
import {AiOutlineShopping} from 'react-icons/ai';
import { Cart } from '.';
import PropTypes from 'prop-types';


const Navbar = ({ showCart, setShowCart }) => {
  return (
    <div className='navbar-container'> 
    <p className='logo'>
      <Link href="/">JSM headphones</Link>

    </p>
    <button type="button" className="cart-icon" onClick={() => setShowCart(true)}>
      <AiOutlineShopping/>
      <span className='cart-item-qty'>1</span>
    </button>
    {showCart && <Cart />}
    </div>
  )
}

Navbar.propTypes = {
    showCart: PropTypes.bool.isRequired,
    setShowCart: PropTypes.func.isRequired
}

Navbar.defaultProps = {
   showCart: false,
   setShowCart: () => {}
}

export default Navbar;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.