调用React Modal组件出现Invalid hook call错误如何解决

你的报错核心是违反了React Hooks的使用规则：

• AddedToCart是标准的React函数组件，内部使用了useState Hook
• 你在onClick的回调函数中直接调用AddedToCart()，相当于在普通函数执行上下文里调用Hook，不符合「Hooks只能在函数组件顶层渲染流程中调用」的要求，因此触发Invalid hook call报错。

将Modal改造为受控组件，把显隐状态放到父组件Search中管理，直接在父组件的JSX树里渲染Modal组件，通过props控制显隐即可。

修正后代码 #

Modal.jsx #

import Modal from 'react-bootstrap/Modal';
import React from 'react';

// 接收父组件传递的显隐状态和关闭回调
export default function AddedToCart({ show, onClose }) {
  return (
    <Modal show={show} onHide={onClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
      <Modal.Footer>
        <button variant='secondary' onClick={onClose}>
          Close
        </button>
        <button variant='primary' onClick={onClose}>
          Save Changes
        </button>
      </Modal.Footer>
    </Modal>
  );
}

Search.jsx #

import AddedToCart from '../modals/Modal';
import { useState } from 'react';

const Search = () => { 
  // 父组件管理Modal的显隐状态
  const [showModal, setShowModal] = useState(false);
  return (
    <div>
      <button onClick={() => setShowModal(true)}>
        打开弹窗
      </button>
      {/* 直接在JSX树中渲染Modal组件，通过props传递控制参数 */}
      <AddedToCart 
        show={showModal} 
        onClose={() => setShowModal(false)} 
      />
    </div>
  )
}

export default Search;

React函数组件必须作为JSX标签的形式被渲染到React组件树中，React才能接管它的生命周期和Hook调用上下文。如果直接将组件作为普通函数调用，会脱离React的渲染流程，内部的Hook调用就会触发规则校验报错。

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