Javascript TypeError:分派不是actions.js文件中的函数

我正在使用Redux thunk中间件开发React Redux应用程序。当我试图在actions.js文件中执行名为removeStock（）的函数时，出现了一个错误：“TypeError:Dispatch不是函数”：

action.js

export const deletePinnedStock = (user_id, stock_name, stock_id) => {
  return dispatch => {
    ApiService.delete("/users/" + user_id + "/stocks/" + stock_id)
    .then(response => {
      dispatch(removeStock(stock_name))
      console.log('here is the', response)
    }).catch((errors) => {
      console.log(errors)
    })
  }
}

  case 'REMOVE_PINNED_STOCK':
    return {
      ...state, 
      stocksData: {
      ...state.stocksData.delete((stock) => stock.name === action.stock_name)
      }
  }

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPinnedStocks, deletePinnedStock, fetchStockData } from 
'../redux/modules/Stock/actions';
import '../styles/spin.css';
import Panel from 'react-uikit-panel';

class StockCard extends Component {

render() {
    const user_id = localStorage.getItem('currentUser_id') 
    const stock = this.props.stock //should be the stockObj keyed by name
    if (!stock) { 
        return null 
    } else {
    return (
        <Panel col='1-2' box title={stock.name} margin='bottom' context='primary'>
            <div>
                Open: {stock.openingPrice}
            </div>
            <div>
                Close: {stock.closingPrice}
            </div>
            <div>
                Low: {stock.low}
            </div>
            <div>
                High: {stock.high}
            </div>
            <div>
                Trading Volume: {stock.volume}
            </div>
            <button type="submit" 
            onClick={deletePinnedStock(user_id, stock.name, stock.id)}>Remove</button>
        </Panel>)
    }
  }
}

function mapStateToProps(state) {
  return {
    currentUser: state.auth.currentUser,
    stocksData: state.stock.stocksData 
  }
}

export default connect(mapStateToProps, { fetchPinnedStocks, 
deletePinnedStock, fetchStockData })(StockCard); 

removeStock（）如下所示：

export const removeStock = (stock_name) => {
  return {
    type: 'REMOVE_PINNED_STOCK',
    stock_name: stock_name
  }
}

与my reducer中的“REMOVE_pinted_STOCK”操作相对应的case语句如下所示：

reducer.js

export const deletePinnedStock = (user_id, stock_name, stock_id) => {
  return dispatch => {
    ApiService.delete("/users/" + user_id + "/stocks/" + stock_id)
    .then(response => {
      dispatch(removeStock(stock_name))
      console.log('here is the', response)
    }).catch((errors) => {
      console.log(errors)
    })
  }
}

  case 'REMOVE_PINNED_STOCK':
    return {
      ...state, 
      stocksData: {
      ...state.stocksData.delete((stock) => stock.name === action.stock_name)
      }
  }

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPinnedStocks, deletePinnedStock, fetchStockData } from 
'../redux/modules/Stock/actions';
import '../styles/spin.css';
import Panel from 'react-uikit-panel';

class StockCard extends Component {

render() {
    const user_id = localStorage.getItem('currentUser_id') 
    const stock = this.props.stock //should be the stockObj keyed by name
    if (!stock) { 
        return null 
    } else {
    return (
        <Panel col='1-2' box title={stock.name} margin='bottom' context='primary'>
            <div>
                Open: {stock.openingPrice}
            </div>
            <div>
                Close: {stock.closingPrice}
            </div>
            <div>
                Low: {stock.low}
            </div>
            <div>
                High: {stock.high}
            </div>
            <div>
                Trading Volume: {stock.volume}
            </div>
            <button type="submit" 
            onClick={deletePinnedStock(user_id, stock.name, stock.id)}>Remove</button>
        </Panel>)
    }
  }
}

function mapStateToProps(state) {
  return {
    currentUser: state.auth.currentUser,
    stocksData: state.stock.stocksData 
  }
}

export default connect(mapStateToProps, { fetchPinnedStocks, 
deletePinnedStock, fetchStockData })(StockCard); 

我不确定为什么我不能在deletePinnedStock（）函数中分派removeStock（）函数。在action.js文件的其他地方，我分派函数时没有问题

编辑#1： deletePinnedStock在我的组件中定义如下：

export const removeStock = (stock_name) => {
  return {
    type: 'REMOVE_PINNED_STOCK',
    stock_name: stock_name
  }
}

stockCard.js

export const deletePinnedStock = (user_id, stock_name, stock_id) => {
  return dispatch => {
    ApiService.delete("/users/" + user_id + "/stocks/" + stock_id)
    .then(response => {
      dispatch(removeStock(stock_name))
      console.log('here is the', response)
    }).catch((errors) => {
      console.log(errors)
    })
  }
}

  case 'REMOVE_PINNED_STOCK':
    return {
      ...state, 
      stocksData: {
      ...state.stocksData.delete((stock) => stock.name === action.stock_name)
      }
  }

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPinnedStocks, deletePinnedStock, fetchStockData } from 
'../redux/modules/Stock/actions';
import '../styles/spin.css';
import Panel from 'react-uikit-panel';

class StockCard extends Component {

render() {
    const user_id = localStorage.getItem('currentUser_id') 
    const stock = this.props.stock //should be the stockObj keyed by name
    if (!stock) { 
        return null 
    } else {
    return (
        <Panel col='1-2' box title={stock.name} margin='bottom' context='primary'>
            <div>
                Open: {stock.openingPrice}
            </div>
            <div>
                Close: {stock.closingPrice}
            </div>
            <div>
                Low: {stock.low}
            </div>
            <div>
                High: {stock.high}
            </div>
            <div>
                Trading Volume: {stock.volume}
            </div>
            <button type="submit" 
            onClick={deletePinnedStock(user_id, stock.name, stock.id)}>Remove</button>
        </Panel>)
    }
  }
}

function mapStateToProps(state) {
  return {
    currentUser: state.auth.currentUser,
    stocksData: state.stock.stocksData 
  }
}

export default connect(mapStateToProps, { fetchPinnedStocks, 
deletePinnedStock, fetchStockData })(StockCard); 

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从导入{FetchPinnedStock，deletePinnedStock，fetchStockData}
“../redux/modules/Stock/actions”；
导入“../styles/spin.css”；
从“反应uikit面板”导入面板；
类StockCard扩展组件{
render（）{
const user\u id=localStorage.getItem（'currentUser\u id'）
const stock=this.props.stock//应该是按名称键入的stockObj
如果（！股票）{
返回空值
}否则{
返回(
打开：{stock.openingPrice}
关闭：{stock.closingPrice}
低：{stock.Low}
高：{stock.High}
交易量：{stock.Volume}
去除
)
}
}
}
函数MapStateTops（状态）{
返回{
currentUser:state.auth.currentUser，
stocksData:state.stock.stocksData
}
}
导出默认连接（MapStateTops，{fetchPinnedStocks，
deletePinnedStock，fetchStockData}（股票卡）；

通过直接调用

deletePinnedStock

，您只是将其作为函数调用，而不是将其分派到redux存储区。当您将操作创建者传递到

connect（）

时，它将作为一个道具添加到组件中，并且该道具映射到

分派

简言之，替换

onClick={deletePinnedStock(user_id, stock.name, stock.id)}

与

---

很难从提供的内容中分辨。组件中如何设置

deletePinnedStock

？可能重复