按下enter键提交表单报错Form submission canceled，Add User按钮功能正常

• 你没有在表单提交回调中调用e.preventDefault()，浏览器会执行原生表单提交的默认逻辑
• 你在createUser的同步执行流程中直接调用showModal(false)，会直接把<FormContainer>从DOM树上卸载，此时浏览器还在处理表单提交逻辑，发现表单节点已经不在DOM中，就会抛出Form submission canceled because form is not connected错误
• 你的Add User按钮当前设置了type="button"，默认不会触发表单提交事件，所以点击不会触发报错，你应该是额外给这个按钮绑定了点击事件执行提交逻辑才可以正常工作

1. 首先在createUser函数开头添加阻止默认事件的逻辑，避免浏览器执行原生表单提交逻辑
2. 把卸载表单的showModal(false)放到异步队列执行，等表单提交事件处理完成后再卸载表单
3. 如果你需要点击Add User按钮触发提交，可以直接把它的type改成submit，不需要额外绑定点击事件

修复后代码参考：

function Form({ modal, showModal, onAddUser }) {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [age, setAge] = useState('');

    const createUser = (e) => {
        // 阻止浏览器默认表单提交行为
        e.preventDefault();
        if (!name || !age || !surname) {
            return;
        } else {
            onAddUser(name, age, surname)
            console.log(name, age)
        }
        setName('');
        setAge('')
        setSurname('');
        // 放到异步队列执行，等提交事件处理完成后再卸载表单
        setTimeout(() => {
            showModal(false)
        }, 0)
        console.log(e);
    }
    return (
        <>
            {modal ? <FormContainer onSubmit={createUser}>
                <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" />
                <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" />
                <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" />
                <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button>
                {/* 把type改成submit，点击自动触发表单提交 */}
                <Button type="submit">Add User</Button>
            </FormContainer>
                : null
            }
        </>
    )
}

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