Я использую 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>
)
}
Я думаю, вы можете захотеть предотвратить отправку по умолчанию.... e.preventDefault()
<button type='button', чтобы кнопка не отправляла форму. Лучше, чем отправить и предотвратить отправку...
Похоже, что эта кнопка, скорее всего, отображается внутри элемента form
, и когда форма отправляется, действие формы по умолчанию не предотвращается, и страница перезагружается.
Кроме того, похоже, что обработчик 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 обновления состояния в очереди обрабатываются асинхронно. Вы не можете поставить в очередь обновление состояния и ожидать, что обновленное значение состояния будет прочитано в той же области функции/обратного вызова, в которой обновление было поставлено в очередь.
Элементы button
имеют type = "submit"
по умолчанию, если атрибут type
не указан.
submitForm
в свойство обработчика form
элемента onSubmit
.preventDefault
на объекте события onSubmit
.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>
у вас есть какие-либо проблемы? или вы спрашиваете просто из любопытства