Почему я получаю "http://localhost:3000/?" route при использовании useNavigate в реакции?

Я использую useNavigate для перехода с одной страницы моего веб-сайта на другую при нажатии кнопки. Когда я запускаю сайт с помощью npm start, когда я нажимаю кнопку, страница перезагружает текущую страницу, а URL-адрес изменяется с «http://localhost:3000» на «http://localhost:3000/?».

Код ниже:

const submitForm = async (e) => {
const res = await fetch("http://localhost:8000/properties")
const jsonData = await res.json()
setProperties(jsonData)
navigate("/list", { state: properties })
}

элемент кнопки:

<button onClick = {() => submitForm()}>Find Properties</button>

Для настройки моих маршрутов в App.js у меня просто есть:

export default function App() {
  return (
    <BrowserRouter>
      <div className = "App">
        <Routes>
          <Route exact path = "/" element = {<FormComponent />} />
          <Route path = "/list" element = {<ListComponent />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

у вас есть какие-либо проблемы? или вы спрашиваете просто из любопытства

Daniel Cruz 20.11.2022 03:35

Я думаю, вы можете захотеть предотвратить отправку по умолчанию.... e.preventDefault()

KcH 20.11.2022 04:15

<button type='button', чтобы кнопка не отправляла форму. Лучше, чем отправить и предотвратить отправку...

Niels Lucas 22.11.2022 11:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
71
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вопросы

  1. Похоже, что эта кнопка, скорее всего, отображается внутри элемента form, и когда форма отправляется, действие формы по умолчанию не предотвращается, и страница перезагружается.

  2. Кроме того, похоже, что обработчик submitForm ставит в очередь обновление состояния React, а затем пытается перейти к ожидаемому обновленному состоянию.

    const submitForm = async (e) => {
      const res = await fetch("http://localhost:8000/properties");
      const jsonData = await res.json();
      setProperties(jsonData);                  // <-- enqueued state update
      navigate("/list", { state: properties }); // <-- stale state
    }
    

    В React обновления состояния в очереди обрабатываются асинхронно. Вы не можете поставить в очередь обновление состояния и ожидать, что обновленное значение состояния будет прочитано в той же области функции/обратного вызова, в которой обновление было поставлено в очередь.

  3. Элементы button имеют type = "submit" по умолчанию, если атрибут type не указан.

Решение

  1. Переместите обработчик обратного вызова submitForm в свойство обработчика form элемента onSubmit.
  2. Вызовите preventDefault на объекте события onSubmit.
  3. Явно объявите тип кнопки.
  4. Передайте полученные данные JSON непосредственно в функцию navigate, нет необходимости обновлять локальное состояние, учитывая, что компонент, скорее всего, скоро будет размонтирован.

Пример:

const submitForm = async (e) => {
  e.preventDefault(); // <-- prevent default form action

  const res = await fetch("http://localhost:8000/properties");
  const jsonData = await res.json();

  navigate("/list", { state: jsonData }); // <-- pass current data
}

...

<form onSubmit = {submitForm}>
  ...

  <button type = "submit">Find Properties</button>
  ...
</form>

Другие вопросы по теме