我的代码在笔记本电脑浏览器上运行良好，但无法在移动浏览器上提交表单。
import { useEffect, useState } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { uri } from "../constants/url";
import { ImageCard } from "./UI";
const Home = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [wapp, setWapp] = useState("");
const [dob, setDob] = useState("");
const [successAlert, setSuccessAlert] = useState(false);
const [warningAlert, setWarningAlert] = useState(false);
const [alertMsg, setAlertMsg] = useState("");
const [dim, setDim] = useState(false);
const [showCard, setShowCard] = useState(false);
const [qr, setQr] = useState("");
useEffect(() => {
let timer;
if (successAlert || warningAlert) {
timer = setTimeout(() => {
setDim(true);
setTimeout(() => {
setSuccessAlert(false);
setWarningAlert(false);
setAlertMsg("");
setDim(false);
}, 2000);
}, 4000);
}
return () => clearTimeout(timer);
}, [successAlert, warningAlert]);
useEffect(() => {
if (qr !== "") {
setShowCard(true);
}
}, [qr]);
const handleSubmit = async (e) => {
e.preventDefault();
if (validateForm()) {
const data = {
name,
email,
wapp,
dob,
};
try {
let response = await axios.post(uri + "sendWifiPassword", data);
const qrCode = response.data;
if (qrCode) {
setQr(qrCode);
setShowCard(true);
}
} catch (error) {
console.error("Error:", error);
}
}
};
const validateForm = () => {
if (name === "") {
setAlertMsg("Please provide you Full Name");
setWarningAlert(true);
return false;
}
if (email === "" && wapp === "") {
setAlertMsg("Please fill out either Email address or WhatsApp number");
setWarningAlert(true);
return false;
}
if (wapp !== "" && !/03\d{9}/.test(wapp)) {
setAlertMsg("Please provide valid Number. Eg: 03125671234");
setWarningAlert(true);
return false;
}
return true;
};
console.log(showCard, qr);
return (
<div>
<nav className="navbar bg-body-tertiary">
<div className="container-fluid">
<a className="navbar-brand">Wifi Demo</a>
<a href="/admin" className="btn btn-warning">
Admin
</a>
</div>
</nav>
<div className="d-flex justify-content-center">
<div className="col-md-6 col-lg-2">
{successAlert && (
<div
id="successAlert"
className="alert alert-success"
style={{ opacity: dim ? 0.5 : 1 }}
>
{alertMsg}
</div>
)}
{warningAlert && (
<div
id="warningAlert"
className="alert alert-warning"
style={{ opacity: dim ? 0.5 : 1 }}
>
{alertMsg}
</div>
)}
</div>
</div>
{showCard ? (
<ImageCard imgSrc={qr} setQr={setQr} showCard={showCard} setShowCard={setShowCard} />
) : (
<div id="formContainer">
<div className="d-flex justify-content-center">
<a>Please fill the form below to get Wifi Password</a>
</div>
<div className="d-flex justify-content-center">
<div className="col-md-6 col-lg-2">
<form id="userForm" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="name" className="form-label">
Full Name
</label>
<input
type="text"
className="form-control"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="email" className="form-label">
Email address
</label>
<input
type="email"
className="form-control"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="wapp" className="form-label">
Whats App #
</label>
<input
type="text"
className="form-control"
id="wapp"
value={wapp}
onChange={(e) => setWapp(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="dob" className="form-label">
Date of Birth
</label>
<input
type="date"
className="form-control"
id="dob"
value={dob}
onChange={(e) => setDob(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-warning">
Submit
</button>
</form>
</div>
</div>
</div>
)}
</div>
);
}
export default Home;
我尝试更改背景颜色来检查问题所在。我在handleSubmit()中有条件检查(qr)是否存在然后继续，如果我在这里将背景颜色设置为红色，它会在网络浏览器上改变，但不会在移动浏览器上改变，
const handleSubmit = async (e) => {
e.preventDefault();
if (validateForm()) {
const data = {
name,
email,
wapp,
dob,
};
try {
let response = await axios.post(uri + "sendWifiPassword", data);
const qrCode = response.data;
if (qrCode) {
setQr(qrCode);
setShowCard(true);
}
} catch (error) {
console.error("Error:", error);
}
}
};
注意：我已手动从日志中复制图像数据并将其提供在以下组件中，并且它在笔记本电脑和移动浏览器上都可以正常工作：
<ImageCard imgSrc={qr} setQr={setQr} showCard={showCard} setShowCard={setShowCard} />
我已经在后端设置了 CORS，并且在本地网络而不是本地主机（即 http://{my_ip_address}:5000）上发送请求，并且它在两个浏览器上都可以工作：
app.use(cors({
origin: '*',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
headers: ['Content-Type', 'Authorization']
}));
移动浏览器上的表单提交问题可能是由多种因素引起的，包括跨设备的事件处理或异步请求行为的差异。以下是调试和解决问题的步骤和建议 3. 检查移动设备上的 JavaScript 错误 使用移动浏览器开发人员工具检查控制台是否有任何 JavaScript 错误。大多数移动浏览器（包括 Chrome 和 Safari）允许您使用连接的桌面检查页面并查看控制台日志。 Chrome：您可以为已连接的 Android 设备打开 DevTools。 Safari：您可以通过 Mac 在连接的 iPhone 上打开 Web Inspector。 确保没有未捕获的错误，因为这些错误可能会阻止代码的进一步执行。 4. 在多个移动浏览器上进行测试 如果您的表单在桌面上运行但在移动设备上失败，请确保问题不是特定于浏览器的。在不同的移动浏览器（例如 Chrome、Safari、Firefox）上进行测试，以排除特定于浏览器的行为。