Запрос React - Post не работает на мобильных устройствах

#reactjs #post #fetch

#reactjs #Публикация #выборка

Вопрос:

Я пытаюсь отправить некоторые простые данные на свой сервер. Все работает нормально — на моем рабочем столе. Когда я пытаюсь использовать свой мобильный телефон (в той же сети), он не работает. Страница просто обновляется, но запрос POST завершается с ошибкой (не уверен, что это сбой, потому что я не могу открыть консоль на своем мобильном телефоне). Похоже, что страница обновляется до того, как она фактически перейдет к команде выборки, но я не уверен и не уверен, как устранить неполадки, потому что она отлично работает на моем рабочем столе. Пожалуйста, помогите! Спасибо 🙂

   const onSubmit = (event) => {
    const data = {
      price: price,
      gallons: gallons,
      miles: miles,
      notes: 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);
  };

1. что process.env.REACT_APP_API_BASE_URL решает?

2. если он работает на рабочем столе нормально, вы можете проверить совместимость с браузером developer.mozilla.org/en-US/docs/Web/API/Response а также вы можете использовать для поддержки polyfill.io/v3

3. Похоже, что это форма, по умолчанию отправка форм в некоторых ситуациях приводит к обновлению страницы. Вам необходимо предотвратить это поведение по умолчанию, чтобы вы могли реализовать пользовательские onSubmit функции, обычно это что-то вроде event.preventDefault() в верхней части обработчика

4. process.env.REACT_APP_API_BASE_URL — это просто переменная env, которая преобразуется в URL. в этом случае: localhost:3000 / потребление . я не думаю, что есть проблема с браузером, потому что я могу поместить туда event.preventDefault(), и он будет работать. Тем не менее, я хочу, чтобы поведение, которое обновляет страница, чтобы пользователь мог видеть только что введенные данные. однако я хочу, чтобы он подождал, пока не будет выполнен вызов POST 🙂

Ответ №1:

Это сработает! Попробуйте это, просто добавлено event.preventDefault() в handleSubmit функцию.

Я перехожу по этой ссылке для отладки на мобильных устройствах.

 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;

1. event.preventDefault() действительно выполняет запрос POST, но я хочу, чтобы поведение, при котором экран обновляется, чтобы пользователь мог видеть только что введенные данные. К сожалению, у меня есть устройство iOS :/