时间戳

首页 > 解决方案 > 为什么 this.props.dispatch 会根据父组件选择性地给出错误？

reactjs - 为什么 this.props.dispatch 会根据父组件选择性地给出错误？

问题描述

尝试在 React-Redux 中构建简单的登录和注销功能。

我试图在按钮组件内的函数中添加所有注销程序。

我有一个名为 LogoutButton 的简单组件，它应该调度新操作并从保留状态的 redux 存储中删除登录信息。

import React, { Component } from "react";
import { update_user_id, update_user_email } from "../../actions";
import { connect } from "react-redux";

export class LogoutButton extends Component {
  render() {
    return (
      <div>
        <button
          onClick={() => {
            localStorage.removeItem("jwtToken");
            this.props.dispatch(update_user_id(""));
            this.props.dispatch(update_user_email(""));
          }}
          >
          Logout
        </button>
      </div>
    );
  }
} 

export default connect()(LogoutButton);

当我将 LougoutButton 插入另一个基于类的组件 (UserInfo.js) -component 时，此方法有效。

但是，当我在 NavBar（基于函数的组件）中添加相同的组件时，我收到以下错误消息。

TypeError: _this.props.dispatch is not a function
onClick
C:/koodi/off_front/src/components/views/LogoutButton.js:12
   9 | <button
  10 |   onClick={() => {
  11 |     localStorage.removeItem("jwtToken");
> 12 |     this.props.dispatch(update_user_id(""));
     | ^  13 |     this.props.dispatch(update_user_email(""));
  14 |   }}
  15 |   >
View compiled
▶ 20 stack frames were collapsed.

我认为原因是如何定义安装 LogoutButton 的组件。试图谷歌信息，但没有找到任何信息。

我对出错的原因非常感兴趣。不仅关于这种特殊情况下的修复，而且更一般地说。

标签： reactjsreduxdispatch

解决方案

我认为问题是因为您为同一个组件使用了 2 个导出。

所以几乎只有默认导出连接到商店，也许你使用命名导出导入了导航栏。

推荐阅读