調度沒有在redux中定義與reactjs

Question

我想知道爲什麼點擊錶行仍然會給我undefined調度錯誤，導致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> 
    } 
} 

我看到存儲對象是目前在調試控制檯，但它不會傳遞到ListingTable組件：

Answer 1

您正在導入未連接的元件噸。

刪除

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';