【问题标题】：My useNavigate doesn't work inside onClick function (react-router-dom) (localstorage)我的 useNavigate 在 onClick 函数 (react-router-dom) (localstorage) 中不起作用
【发布时间】：2023-01-26 03:54:35
【问题描述】：

默认情况下，我在 localStorage 中收到一个数组“名称”，其中一个项目位于 [0] 位置。在我的 handleExitChat 函数中，我删除了我在 localStorage 中收到的这个项目，并通过接收 useNavigate() 的导航将用户定向到主页“/”。当我提交时，我的 localStorage 中的“名称”项目已按我的意愿删除，但我没有定向到主页“/”，我只能将它放在 url 中而不是通过按钮。我想知道为什么导航在此功能中被阻止。

import * as C from './styles';

import { useNavigate } from 'react-router-dom';

const Chat = () => {
  const navigate = useNavigate();

  const handleExitChat = async () => {
    const remove = await JSON.parse(localStorage.removeItem("name"))[0];
    navigate('/');
  }

  return (
    <C.Container>
       <C.RemoveChat>
         <button onClick={handleExitChat}>Logout</button>
       </C.RemoveChat>
    </C.Container>
  )
}

export default Chat;

错误

SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at handleExitChat (index.jsx:50:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

【问题讨论】：

你是说 navigate("/") 没有导航到 "/" 路径吗？控制台中是否有任何错误？应用程序是否正在导航任何地方？此外，仅供参考 localStorage 是同步的。
是的。控制台中没有错误，我没有被重定向到任何页面，我只是停留在同一页面上，但 localStorage 项目已按照我在函数中的计划被删除
这个组件是否有机会在任何 form 元素内呈现？你可以edit包括一个更完整和全面的minimal reproducible example吗？
我没有提到的一件事。但是那个'/'页面只有在localStorage中没有任何项目时才允许进入。在我的主页上，我有一个 useEffect 检查 localStorage 中是否有任何项目，如果有，它会重定向到我在此处发布的相关页面
localStorge.removeItem 是无效返回，你是吗当然没有抛出错误？我试过那行代码，JSON.parse(undefined) 抛出错误，因为 undefined 不是要解析的有效 JSON 字符串。我认为我们需要为您在这里总体上尝试做的事情提供更多的背景信息。所以你是说也许导航做过工作，也许你被导航回路线呈现Chat？

标签： javascript reactjs react-router local-storage react-router-dom

【解决方案1】：

问题

据我所知，handleExitChat 点击处理程序中存在一些问题。

localStorage.removeItem 是无效返回。见return value。
尝试对删除项目的未定义返回值进行 JSON 解析时抛出错误。 undefined 不是有效的 JSON。根本没有什么可解析的。
抛出错误并停止代码执行。 navigate("/") 行永远不会到达。

解决方案

只需从存储中删除项目并发出导航操作。 localStorage 是同步的，所以 await 没有什么用。
```
const handleExitChat = () => {
  localStorage.removeItem("name"));
  navigate('/');
};
```
以防万一 Chat 组件在任何 form 元素内呈现，您需要指定按钮不是一个提交按钮。如果没有指定，button元素默认为type="submit"。
```
<button type="button" onClick={handleExitChat}>
  Logout
</button>
```

【讨论】：