在 redux 中未使用 reactjs 定义调度

Posted 2023-02-22

【中文标题】在 redux 中未使用 reactjs 定义调度

【英文标题】：Dispatch is not defined in redux with reactjs

【发布时间】：2016-11-18 03:51:26

【问题描述】：

我想知道为什么单击表格行仍然会给我未定义的调度错误，导致Uncaught TypeError: dispatch is not a function。我一直在关注这个post 来尝试解决问题，但到目前为止还没有成功。

ListingTable.js

import Table from 'grommet/components/Table';
import React from 'react';
import remove, add from '../action/ListAction';
import connect from 'react-redux'

let createHandlers = function(dispatch) 
    let onClick = function(item) 
        dispatch(add(item)) <<== undefined!!!!
    ;
    return 
        onClick
    ;
;
export class ListingTable extends React.Component 

    constructor(props) 
        super(props);
        this.handlers = createHandlers(this.props.dispatch);
    
    render() 
        return <Table>
                <tbody>
                
                    this.props.data.map((item, key)=>
                        (
                            // Undefined Error!!!!
                            <tr onClick=()=> this.handlers.onClick(item) key=key>

                                <td>item.user_name</td>
                                <td>item.name</td>
                                <td>item.url</td>
                            </tr>
                        ))
                
                </tbody>
            </Table>
    


export default connect()(ListingTable)

app.js

import  ListingTable  from './component/ListingTable';
import  Provider  from 'react-redux'
import createStore from 'redux';
import reducer from '../reducer/ListingReducer'

export default class Page extends React.Component 
   render() 
      <Provider store=createStore(reducer)>
         <ListingTable data=this.props.item/>
      </Provider>
   

我在调试控制台中看到了 store 对象，但它没有传递给 ListingTable 组件：

【问题讨论】：

import ListingTable from './' 在默认导出时导入值，而 import ListingTable from './' 按名称导入值

【参考方案1】：

您正在导入未连接的组件。

在class ListingTable之前删除export

class ListingTable extends React.Component 

  constructor(props) 
    super(props);
    this.handlers = createHandlers(this.props.dispatch);
  
  render() 
    return <Table>
            <tbody>
            
                this.props.data.map((item, key)=>
                    (
                        // Undefined Error!!!!
                        <tr onClick=()=> this.handlers.onClick(item) key=key>

                            <td>item.user_name</td>
                            <td>item.name</td>
                            <td>item.url</td>
                        </tr>
                    ))
            
            </tbody>
        </Table>
  


export default connect()(ListingTable)

app.js

import ListingTable from './component/ListingTable';

【讨论】：

使用 typescript / ES6，我还必须将我的导入从 import ListingTable from '..' 更改为 import ListingTable from '..'。非常微妙，我想现在我知道export default 是如何工作的了。