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

Question

尝试在 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 插入另一个基于 class 的组件 (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 的组件。试图 google 信息但没有找到。

我对出错的原因很感兴趣。不仅是关于这个特殊情况的修复，还有更一般的修复。

Answer 1

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

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

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

Why this.props.dispatch gives error selectively error depending of the parent component?

dispatch

reactjs

redux