当 我 使用 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>
)
}
格式
1条答案
按热度按时间yvfmudvl1#
个问题
1.看起来这个按钮很可能呈现在
form
元素中,当提交表单时,默认的表单操作***没有***被阻止,页面正在重新加载。1.此外,
submitForm
处理程序似乎正在将React状态更新入队,然后尝试使用预期的更新状态进行导航。在React中,入队的状态更新是异步处理的。您不能将状态更新入队并期望在更新入队的同一函数/回调作用域中读取更新的状态值。
1.如果未提供
type
属性,则默认情况下button
元素具有type="submit"
。溶液
1.将
submitForm
回调处理程序移动到form
元素的onSubmit
处理程序属性。1.在
onSubmit
事件对象上呼叫preventDefault
。1.明确宣告按钮型别。
1.直接在
navigate
函数中传递获取的JSON数据,考虑到组件可能很快就会卸载,因此无需更新本地状态。示例: