reactjs 为什么在响应中使用useNavigate时得到“http：//localhost：3000/？'"路由？

guykilcj 于 2022-11-22 发布在 React

关注(0)|答案(1)|浏览(198)

当我使用 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>
  )
}

格式

reactjs

来源：https://stackoverflow.com/questions/74505240/why-am-i-getting-http-localhost3000-route-when-using-usenavigate-in-react

1条答案

按热度按时间

yvfmudvl1#

个问题

1.看起来这个按钮很可能呈现在form元素中，当提交表单时，默认的表单操作***没有***被阻止，页面正在重新加载。
1.此外，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中，入队的状态更新是异步处理的。您不能将状态更新入队并期望在更新入队的同一函数/回调作用域中读取更新的状态值。
1.如果未提供type属性，则默认情况下button元素具有type="submit"。

溶液

1.将submitForm回调处理程序移动到form元素的onSubmit处理程序属性。
1.在onSubmit事件对象上呼叫preventDefault。
1.明确宣告按钮型别。
1.直接在navigate函数中传递获取的JSON数据，考虑到组件可能很快就会卸载，因此无需更新本地状态。
示例：

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>

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 为什么在响应中使用useNavigate时得到“http：//localhost：3000/？'"路由？

1条答案

个问题

溶液

相关问题

热门标签

最新问答