TypeError: addTicket is not a function - UseState in modal to print in another page

Question

我在使用 useState 挂钩时遇到了一些问题，我不明白为什么这不起作用。

我正在构建一个简单的票务系统，每当用户点击一个按钮时，它都会打开一个模式，用户可以写下他们的问题。

我无法将此模态数据显示在另一个页面上，用户可以在该页面上看到所有票证，例如列表。

如果我执行 console.log，我可以看到用户输入，但如果尝试将其打印到页面本身，它就不起作用。

抛出一个错误说TypeError: addTicket is not a function 最后我想以格式（ID - 标题 - 状态）显示模态信息，我该如何处理 id 部分，以便它在每个提交事件中迭代自己？

非常感谢！

列表页面上的代码

const Home = () => {

    const [showModal, setShowModal] = useState(false);

    const openModal = () => {
        setShowModal(prev => !prev)
    }

    const[tickets, setTickets] = useState([]);

    const addTicket = ( title ) =>{
        setTickets([...tickets, { title }])
    }


    return(
        <>
        <PageContainer>
            <HeaderContainer>
                <img src={ gugale } alt="logo-left"/>
                <img src={ logo } alt="logo-right"/>
            </HeaderContainer>
            <TicketsContainer>
            <CreateTicketModal showModal={ showModal } setShowModal= { setShowModal }/>
            <TicketsTop>
                <p>Seus tickets</p>
                <button onClick={openModal}>Novo ticket</button>
            </TicketsTop>

            <TicketTitles>
                <p>ID</p>
                <p>Título</p>
                <p>Status</p>
            </TicketTitles>
            <TicketsInfo>
                { tickets.map(ticket => {
                    <p> {ticket.name} </p>
                })}
            </TicketsInfo>
            </TicketsContainer>
        </PageContainer>
    <GlobalStyle/> 
    </>
    )
}

模态页面上的代码

const CreateTicketModal = ({showModal, setShowModal, addTicket}) => {

    const [ title, setTitle] = useState("");

    const handleName = (e) => {
        setTitle(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        addTicket(title);
    }

    return (
    <>
        {showModal ? (
            <Background showModal={showModal}>
                <ModalWrapper>
                    <ModalHeader>
                        <p className="createNew" >Criar Novo Ticket</p>
                        <button className="closebtn" onClick={() => setShowModal(prev => !prev)}><FiX className="icon"></FiX></button>
                    </ModalHeader>
                    <form onSubmit={ handleSubmit } >
                        <p className="ticketTitle">Título</p>
                        <input type="text" name="ticketInput" placeholder="Escreva uma breve descrição sobre o problema" required onChange={ handleName } className="titleInput"/>

                        <p className="dscptTitle">Descrição</p>
                        <textarea type="text" name="dscpInput" placeholder="Escreva detalhadamente a sua solicitação..." className="dscpInput"/>

                        <p className="anex">Anexos</p>
                        <p className="anexDscp">Envie-nos arquivos, imagens ou textos que possam contribuir para a verificação da solicitação</p>
                        <Anex>
                            <FiUploadCloud className="anexCloud"></FiUploadCloud>
                            <p>Arraste e solte arquivos aqui ou</p>
                            <button>Selecione aqui</button>
                        </Anex>
                            <button addTicket={ addTicket }className="addTkt">Adicionar ticket</button>
                    </form>
                </ModalWrapper>
               <GlobalStyle/>
            </Background>
            
        ): null}
    </>
    )
}

Answer 1

我相信您缺少将addTicket 函数作为道具传递给CreateTicketModal 组件

<CreateTicketModal showModal={showModal} setShowModal= {setShowModal} addTicket={addTicket} />

Answer 2

您需要将 addTicket 作为 <CreateTicketModal addTicket={addTicket} ... /> 的 props 传递给 Modal 组件，以便在子组件中访问它。