Question

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

我试图将所有注销过程添加到按钮组件内部的函数中。

我有一个名为LogoutButton的简单组件，该组件应该调度新动作并从redux存储中删除login-info，以保持状态。

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的组件。尝试使用Google信息，但未找到任何内容。

我对出现问题的原因非常感兴趣。不仅涉及这种特定情况下的修复，而且涉及范围更广。

Answer 1

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

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

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

1 个答案: