下面的代码来自App.jsx
我试图通过传递true-false来打开一个additmodal行：44，得到错误“Cannot update a component（App）while rendering a different component（AddBudgetModal）. To locate the bad setState（）call inside AddBudgetModal“。

import { Container, Stack, Button } from "react-bootstrap";
import BudgetCard from "./BudgetCard";
import AddBudgetModal from "./AddBudgetModal";
import { useState } from "react";

function App() {

  const [isopen, setOpen]= useState(false)
  function showAddModal(){
    console.log("click")
    setOpen(true)
  }
  function handleClose(){
    setOpen(false)
  }
  return (
    <>
    <Container className="my-4">
      <Stack direction="horizontal" gap={2} className="mb-4">
        <h1 className="me-auto">Budget App</h1>
        <Button className="" variant="primary" onClick={showAddModal}>
          Add Budget
        </Button>
        <Button className="" variant="outline-danger">
          Add Expense
        </Button>
      </Stack>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr))",
          gap: "1rem",
          alignItems: "flex-start",
        }}
      >
        <BudgetCard name="Chocolates" amount="60" maxamount="100" />
        <BudgetCard name="Chocolates" amount="60" maxamount="100" />
        <BudgetCard name="Chocolates" amount="60" maxamount="100" />

        <BudgetCard name="Chocolates" amount="60" maxamount="100" />
      </div>
    </Container>
    <AddBudgetModal show={isopen} handleClose={handleClose}/>
    </>
  );
}

字符串
这是我的AddBudgetModal

import React, { useRef } from 'react'
import { Modal,Form, Button} from 'react-bootstrap'
import { useBudget } from './context/BudgetContext'

export default function AddBudgetModal({show, handleClose}) {
const nameref= useRef()
const maxref= useRef()
 const {addBudget}= useBudget()



    function handleSubmit(e){
      e.preventDefault()

addBudget( {
        name:nameref.current.value,
        maxamount: parseFloat(maxref.current.value)
      })
      handleClose()
    }
  return (
<Modal show= {show} onHide={handleClose()}>
    <Form onSubmit={handleSubmit}>
        <Modal.Header closeButton>
            <Modal.Title>New Budget</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form.Group className='mb-3' controlId='name'>
                <Form.Label>Name</Form.Label>
                <Form.Control ref={nameref} type='text' required/>
            </Form.Group>
            <Form.Group className='mb-3' controlId='maxamount'>
                <Form.Label>Maximum Spending</Form.Label>
                <Form.Control ref={maxref} type='number' required min={0}/>
            </Form.Group>
            <div className='d-flex justify-content-end'>
            <Button variant="success" type='submit'>Add</Button>
            </div>
        </Modal.Body>

    </Form>

</Modal>
  )
}

型
我正在使用状态在true和false之间切换，我不知道发生了什么。