RemixJS中提交表单后隐藏模态框的实现方案问询

先修正你代码里的几个语法错误：

1. initialState里的赋值需用冒号而非等号：isDeleteModalOpen: false
2. 触发模态框的<button>标签未闭合
3. Modal的show属性需绑定state.isDeleteModalOpen，而非直接使用isDeleteModalOpen

针对提交后模态框不关闭的问题，提供三种可行方案：

方案一：利用Remix的useActionData钩子 #

表单提交后，action函数会返回数据，通过useActionData获取返回结果，触发关闭模态框的dispatch。

修改后的完整代码示例：

import { Button, Modal, Alert } from "flowbite-react";
import { useReducer, useEffect } from "react";
import { useActionData, Form } from "@remix-run/react";
import { HiInformationCircle } from "react-icons/hi";

export const loader = ({params, request}) => {
    // 原逻辑保留
}
export const action = ({request}) => {
    // 处理删除逻辑后，返回成功标识
    return { success: true };
}

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

    // 提交完成后关闭模态框
    useEffect(() => {
        if (actionData?.success) {
            dispatch({ type: "hideDeleteModal" });
        }
    }, [actionData, dispatch]);

    return (
        <>
            <button onClick={() => dispatch({type:"showDeleteModal"})}>打开删除模态框</button>
            <Modal
                show={state.isDeleteModalOpen}
                onClose={() => dispatch({ type: "hideDeleteModal" })}
                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>
        </>
    )
}

export default MainComponent;

方案二：提交按钮点击时直接关闭模态框 #

在提交按钮的点击事件中，先触发关闭模态框的dispatch，再让表单正常提交，适合无需等待服务器返回就关闭模态框的场景。

修改提交按钮代码：

<Button 
    color="warning" 
    type="submit"
    onClick={() => dispatch({ type: "hideDeleteModal" })}
>
    Delete
</Button>

方案三：利用Remix的useNavigation监听提交状态 #

通过useNavigation获取当前导航状态，当表单提交完成（导航从loading变为idle）时关闭模态框。

代码示例：

import { useNavigation } from "@remix-run/react";
import { useEffect } from "react";

// 组件内部添加
const navigation = useNavigation();

useEffect(() => {
    // 导航结束且模态框处于打开状态时关闭
    if (navigation.state === "idle" && state.isDeleteModalOpen) {
        dispatch({ type: "hideDeleteModal" });
    }
}, [navigation.state, state.isDeleteModalOpen, dispatch]);

可根据业务场景选择合适的方案解决问题。

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