在 remixjs 中隐藏提交时的模态表单答案

【问题标题】：Hide a modal form on submission in remixjs在 remixjs 中隐藏提交时的模态表单
【发布时间】：2023-01-13 12:43:22
【问题描述】：

我目前正在做一个混音项目，我有一个看起来很像这样的文件。

import { Button, Modal } from "flowbite-react";

import {useReducer} from "react";

export const loader = ({params, request}) => {
    // a bunch of stuff here;
}
export const action = ({request}) => {
    // a bunch of stuff here;
}

const MainComponent = () => {
    
    const initialState = {
        isDeleteModalOpen = false;
    }
    
    const reducer = (state, action) => {
        const obj = Object.assign({}, state);
        
        switch (action.type){
            case "showDeleteModal":{
                obj.isDeleteModalOpen = true;
                return obj;
            }
            case "hideDeleteModal":{
                obj.isDeleteModalOpen = false;
                return obj;
            }
        }
    }
    const [state, dispatch] = useReducer(reducer, initialState);
    return (

        <>
            <button onClick={() => dispatch({type:"showDeleteModal"})}
            <React.Fragment>
                <Modal
                    show={isDeleteModalOpen}
                    onClose={() => dispatch({ type: "hideDeleteModal", id: "" })}
                    size="sm"
                    >
                    <Form method="post">
                        <Modal.Header>Are you sure?</Modal.Header>
                        <Modal.Body>
                            <div className="space-y-6">
                                <Alert color="failure" icon={HiInformationCircle}>
                                    <span>
                                        <span className="font-medium">Proceed with care! </span>{" "}
                                        This action could cause permanent data loss{" "}
                                    </span>
                                </Alert>
                            </div>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button color="warning" type="submit">
                                Delete
                            </Button>

                            <Button
                                color="gray"
                                onClick={() => dispatch({ type: "hideDeleteModal" })}
                                >
                                Cancel
                            </Button>
                        </Modal.Footer>
                    </Form>
                </Modal>
            </React.Fragment>
        </>
    )

}

export default MainComponent;

模态由国家控制，现在我可以让表格正常工作。但是，提交后它会留在那里，因为我从不告诉它隐藏。虽然我实际上想要的是表单在用户提交时消失。不幸的是，在 useEffect 钩子中这样做似乎是不可能的。

我已经对此进行了几项研究，但似乎找不到涵盖类似案例的任何解决方案。

任何帮助，将不胜感激。谢谢你。

【问题讨论】：

标签： modal-dialog remix

【解决方案1】：

基于fetcher.data 的关闭模式。如果 fetcher data 在那里那么你的表单操作成功你现在可以关闭你的模态，如果没有 data 变成 null 你可以显示相应的 UI。

【讨论】：