javascript - Dispatch is not defined in redux with reactjs - Stack Overflow

admin管理员组

文章数量:1356792

I want to know why clicking on the table row would still give me undefined dispatch error which leads to Uncaught TypeError: dispatch is not a function. I have been following this post to try and fix the problem, but so far no success.

ListingTable.js

import Table from 'grommet/ponents/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 './ponent/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>
   }
}

I saw that the store object is present in the debug console, but it isn't passed to the ListingTable ponent:

I want to know why clicking on the table row would still give me undefined dispatch error which leads to Uncaught TypeError: dispatch is not a function. I have been following this post to try and fix the problem, but so far no success.

ListingTable.js

import Table from 'grommet/ponents/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 './ponent/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>
   }
}

I saw that the store object is present in the debug console, but it isn't passed to the ListingTable ponent:

• javascript
• reactjs
• ecmascript-6
• redux
• flux

Share Improve this question Follow edited Jul 15, 2016 at 5:19 Vitaly Kravtsov 97055 silver badges2020 bronze badges asked Jul 15, 2016 at 3:50 RedGiantRedGiant 4,7491111 gold badges6363 silver badges151151 bronze badges 1

• import ListingTable from './' imports value on default export while import { ListingTable } from './' imports value by its name – Hanmaslah Commented Jan 12, 2017 at 17:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You are importing not connected ponent.

remove export before class ListingTable

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 './ponent/ListingTable';

本文标签： javascriptDispatch is not defined in redux with reactjsStack Overflow