Reactjs React-Post请求在移动设备上不起作用

我正在尝试向我的服务器提交一些简单的数据。一切正常-在我的桌面上。当我尝试使用手机（同一网络）时，它不工作。页面只是刷新，但POST请求失败（不确定是否失败，因为我无法在手机上打开控制台）。看起来页面在实际到达fetch命令之前会刷新，但我不确定，也不确定如何进行故障排除，因为它在我的桌面上工作正常。请帮忙！谢谢：）

---

这会有用的！尝试一下，只需在

handleSubmit

函数中添加

event.preventDefault（）

我在移动设备中调试时遵循这一点。

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');
  const handleSubmit = (event) => {
    event.preventDefault();

    const data = {
      price,
      gallons,
      miles,
      notes,
      source: params.car_source,
    };

    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    };

    fetch(`${process.env.REACT_APP_API_BASE_URL}/consumption/`, options);
  };

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default NameForm;

import React，{useState}来自“React”；
函数NameForm（）{
const[name，setName]=useState（“”）；
const handleSubmit=（事件）=>{
event.preventDefault（）；
常数数据={
价格，
加仑，
英里，
笔记，
来源：params.car_来源，
};
常量选项={
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（数据），
};
fetch（`process.env.REACT\u APP\u API\u BASE\u URL}/consumption/`，选项）；
};
常量handleChange=（事件）=>{
setName（event.target.value）；
};
返回(
姓名：
);
}
导出默认名称表单；

process.env.REACT\u APP\u API\u BASE\u URL解决什么问题？如果它在桌面上正常工作，您可以检查浏览器兼容性，也可以使用它作为支持，它看起来像是一个表单，默认情况下，在某些情况下提交表单会导致页面刷新。您需要防止这种默认行为，以便实现自定义

onSubmit

功能，通常类似于handlerprocess.env.REACT\u APP\u API\u BASE\u URL顶部的

event.preventDefault（）

——这只是一个解析为URL的环境变量。在本例中：。我不认为存在浏览器问题，因为我可以将event.preventDefault（）放在那里，它就会工作。但是，我需要页面刷新的行为，以便用户可以看到刚刚输入的数据。但是，我希望它等待POST调用完成：）event.preventDefault（）确实执行POST请求，但我希望屏幕刷新，以便用户可以看到他们刚刚输入的数据。不幸的是，我有一个iOS设备：/

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');
  const handleSubmit = (event) => {
    event.preventDefault();

    const data = {
      price,
      gallons,
      miles,
      notes,
      source: params.car_source,
    };

    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    };

    fetch(`${process.env.REACT_APP_API_BASE_URL}/consumption/`, options);
  };

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default NameForm;