React表单提交后关闭弹窗问题求助

问题 #

在allVendors.jsx页面点击「Add new」按钮打开弹窗，填写表单点击「Submit」后，弹窗无法关闭，也无法自动刷新供应商列表。

解决方案 #

核心是将父组件的弹窗状态控制函数传递给子组件，在表单提交成功后触发关闭操作，同时刷新表格数据：

1. 传递状态控制函数到子组件
   在allVendors.jsx中，给<Vendor />组件传入setOpenPopup和setTableData：

// allVendors.jsx 中修改Vendor组件的调用
<Vendor setOpenPopup={setOpenPopup} setTableData={setTableData} />

2. 在子组件中接收并调用函数
   在newVendor.js中接收传入的props，在表单提交成功的回调里关闭弹窗并重新获取供应商数据：

// newVendor.js 修改组件定义和handleClick函数
export default function Vendor({ setOpenPopup, setTableData }) {
    const paperStyle={ width: '100%', margin: "auto"}
    const [name, setName]=useState('')
    const [zip, setZip]=useState('')
    const [state, setState]=useState('')
    const [city, setCity]=useState('')

    const handleClick=(e)=>{
        e.preventDefault()
        const newVendor={name, zip, state, city}
        console.log(newVendor)
        fetch("http://localhost:1010/vendors/add", {
            method: "POST",
            headers:{"Content-Type":"application/json"},
            body:JSON.stringify(newVendor)
    }).then(()=>{
        console.log("New vendor added");
        // 关闭弹窗
        setOpenPopup(false);
        // 重新获取数据刷新表格
        fetch("http://localhost:1010/vendors/allVendors")
            .then((data) => data.json())
            .then((data) => setTableData(data));
    })
    }

    // 原有返回代码保持不变
    return (
        <Container className='formContainer'>
            <Paper elevation={1} style={paperStyle}>
                <form className='vendorForm' noValidate autoComplete="off">
                    <Box
                    component="form"
                    sx={{
                        '& .MuiTextField-root': { m: 2 },
                    }}
                    noValidate
                    autoComplete="off"
                    >
                        <div>
                            <TextField
                            required
                            id="outlined-required"
                            label="Name"
                            value={name}
                            onChange={(e)=>setName(e.target.value)}
                            />
                            <TextField
                            id="outlined-required"
                            label="ZIP"
                            value={zip}
                            onChange={(e)=>setZip(e.target.value)}
                            />
                            <TextField
                            id="outlined-required"
                            label="State"
                            value={state}
                            onChange={(e)=>setState(e.target.value)}
                            />
                            <TextField
                            id="outlined-required"
                            label="City"
                            value={city}
                            onChange={(e)=>setCity(e.target.value)}
                            />                                
                        </div>
                    </Box>
                    <Button variant="contained" onClick={handleClick}>Submit</Button>
                </form>
            </Paper>
        </Container>
    );
}

说明 #

• 弹窗的状态openPopup由父组件allVendors.jsx管理，子组件通过props获取setOpenPopup来修改状态，符合React单向数据流原则。
• 提交成功后重新获取数据，确保表格能实时显示新增的供应商信息。

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