ReactJS TypeError：无法读取未定义的属性“推送”

Posted 2023-03-13

【中文标题】ReactJS TypeError：无法读取未定义的属性“推送”

【英文标题】：ReactJS TypeError: Cannot read property 'push' of undefined

【发布时间】：2020-04-20 22:17:00

【问题描述】：

我构建我的应用程序并学习 ReactJS

到目前为止，我的代码错误，我尝试在互联网和论坛上搜索但无法修复。 这是我的代码：

logout()
    localStorage.removeItem("token");
    localStorage.clear();
    if(localStorage.getItem('token') === null)
        this.props.history.push('/login')
    

错误：TypeError：无法读取未定义的属性“push”

请帮帮我

【问题讨论】：

你的错误信息是Cannot read property 'push' of undefined，这意味着this.props.history不存在，用于调试首先控制台this.props.history

你能分享更多你的代码吗？喜欢整个组件

您是否将组件包装在 withRouter HOC 中。 example from docs

嗨，props.history 里面没有值。它的类型现在是未定义的。此链接可能会有所帮助net-informations.com/js/iq/unerror.htm

【参考方案1】：

我的猜测是你的logout 是在一个不是 Route it self 的组件中。 我的意思是你没有做<Route path="/" component=ComponentThatHasLogoutMethod />

只有用作 Route 的组件才有 history 属性。 如果您需要其他一些嵌套组件中的那些，您可以使用来自react-router-dom 的withRouter 高阶组件

export default withRouter(ComponentThatHasLogoutMethod)

这会将 history 属性传递给您的组件，并且您不会得到 null。

【参考方案2】：

带有反应钩子的解决方案示例：

import  useHistory  from "react-router-dom";

function HomeButton() 
  const history = useHistory();

  function handleClick() 
    localStorage.removeItem("token")
    localStorage.clear()
    if(!localStorage.getItem('token'))
      history.push("/login")
    
  

  return (
    <button type="button" onClick=handleClick>
      Login
    </button>
  );

您可以在文档中找到更多信息 https://reacttraining.com/react-router/web/api/Hooks/usehistory

【参考方案3】：

我在创建自定义门户以显示注销/登录等模型时遇到了类似问题。

const App = () => 
  const [modal] = useSelector(( modal ) => [modal])
  return (
    <>
      <Portal modal=modal />  
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </>
  );


export default App;

正确的方式- Portal 必须是 BrowserRouter 的子节点。

const App = () => 
      const [modal] = useSelector(( modal ) => [modal])
      return (
        <>
          <BrowserRouter>
            <Portal modal=modal />  
            <Routes />
          </BrowserRouter>
        </>
      );
   

更多参考请参见Router。

【参考方案4】：

对于这个问题，我们有两种解决方案——：

用粗箭头符号声明替换函数声明，即 -:

  logout = () => 
        localStorage.removeItem("token");
        localStorage.clear();
        if(localStorage.getItem('token') === null)
            this.props.history.push('/login');
        
    

我们可以在构造函数中绑定logout函数-:

  constructor(props)
      super(props);
      this.logout = this.logout.bind(this);