Reactjs mapDispatchToProps未将函数传递给类

我正在使用componentDidUpdate将状态发送到dispatch。目前我得到的错误是this.props.handleSubmit不是一个函数。当我记录

this.props

时，我在日志中看不到该函数，即使我通过mapDispatchToProps传递它。为什么会这样

组成部分

import React, { Component } from "react";
import PlayerCard from "../PlayerCard";
import Shuffler from "../Shuffler";

class MatchCard extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: 0,
      winner: "",
    };
  }

  componentDidUpdate(prevState, handleSubmit) {
    if (this.state.winner !== prevState.winner) {
      this.props.handleSubmit(this.state.winner);
    }
  }

  render(key, players) {
    const { handleClick } = this.props;
    let arr = this.props.players;

    const checkSelected = (value) => {
      return !this.state.selected ? value : 0;
    };

    return (
      <div
        className={`${
          this.state.selected ? "pointer-events-none" : null
        } mt-4 mb-4`}
      >
        <>
          <PlayerCard
            player={arr[0]}
            selected={this.state.selected === 1}
            handleClick={() =>
              this.setState({ selected: checkSelected(1), winner: arr[0] })
            }
            handleDispatch={this.handleSubmit}
          />
          <PlayerCard
            player={arr[1]}
            selected={this.state.selected === 2}
            handleClick={() =>
              this.setState({ selected: checkSelected(2), winner: arr[1] })
            }
            handleDispatch={this.handleSubmit}
          />
        </>
      </div>
    );
  }
}

export default MatchCard;

玩家卡

import React, { Component } from "react";

class PlayerCard extends Component {
  render() {
    return (
      <div
        key={this.props.key}
        className={`bg-${
          this.props.selected ? "blue-400" : "red-400"
        } h-64 w-64 flex justify-center shadow-xl focus:shadow-outline`}
        onClick={this.props.handleClick}
      >
        <p className="text-white">{this.props.player}</p>
      </div>
    );
  }
}

export default PlayerCard;

import React，{Component}来自“React”；
类PlayerCard扩展组件{
render（）{
返回(
{this.props.player}
);
}
}
导出默认播放卡；

首先，您颠倒了的顺序。它应该是

prevProps

，然后是

prevState

。虽然你可以用其他名字。还请记住，

handleSubmit

只是

this.props

或

prevProps

中的一个道具（您不应该给出

componentdiddupdate

名称

handleSubmit

的参数，这很容易混淆）

由于此反转，您的

this.state.winner！==prevState.winner

始终为false（

prevProps

您调用的

prevState

没有

winner

属性，因此您的

prevState.winner

是

未定义的

）

不太确定你的

handleDispatch

有什么用，但是你传递的

this.handleSubmit

不正确：它应该是

this.props.handleSubmit

---

可能您收到的

this.props.handleSubmit不是一个函数

错误是从

PlayerCard

抛出的。这是有道理的。请详细说明和/或摘录

PlayerCard

，以便我们可以帮助您。

您使用的是哪种组件？从

MatchCard

导出的默认值，还是从您用

connect

HOC装饰的地方导出的默认值？您还混合/弄乱了react生命周期函数的函数签名

componentDidUpdate

使用以前的道具、以前的状态和快照，而render不使用任何道具。我使用的是从MatchCardOk导出的默认设置，这就是我想的，它不会将

handleSubmit

注入到它的道具中，因此它是未定义的。我认为Drew是对的：在您编写

的组件中，您是从您的

mapDispatchToProps

所在的文件导入了

MatchCard

（好）还是从

MatchCard

本身导入的（坏）？抱歉-误读了您的问题（我来晚了）。默认值是从您看到的

connect

HOCThanks的地方导出的-我添加了PlayerCard的一个摘录。我正在使用dispatch将赢家状态发送到redux状态中的一个数组中-MatchCard既有一个子组件（PlayerCard），也有一个父组件

import React, { Component } from "react";

class PlayerCard extends Component {
  render() {
    return (
      <div
        key={this.props.key}
        className={`bg-${
          this.props.selected ? "blue-400" : "red-400"
        } h-64 w-64 flex justify-center shadow-xl focus:shadow-outline`}
        onClick={this.props.handleClick}
      >
        <p className="text-white">{this.props.player}</p>
      </div>
    );
  }
}

export default PlayerCard;