Cannot read property 'dispatch' of undefined with React-Highcharts

Question

I try to make my series data has click event with redux, however, I got problem when I try to dispatch my function in the callback, I'm using React-Highcharts library, I've also tried to access the chart after the component mounted, but I'm not sure how to do that since there are no example on that.

import React, { Component } from 'react'
import ReactHighcharts from 'react-highcharts'
import {connect} from 'react-redux'
import autobind from 'react-autobind'
import '../style.scss'
import axios from 'axios';
import { handleKeywordTweets } from '../actions'
import { store } from '../../../app.jsx'
require('highcharts/modules/wordcloud.js')(ReactHighcharts.Highcharts)

class WordCloud extends Component {
    constructor(props) {
        super(props);
        autobind(this);
    }

    render() {
        const { keywords } = this.props
        console.log(keywords);
        let words = []
        keywords.map(data => {
            let obj = {}
            obj.name = data.word
            if(data.count < 100) {
                obj.weight = 5
            } else {
                obj.weight = 6
            }
            words.push(obj)
        })

        let config = {
                chart: {
                    type: 'column',
                    inverted: false,
                    height:400,
                    marginTop:75,
                    marginBottom: 20,
                    borderRadius: 8,
                    backgroundColor: "#2B2E4A",
                },
                tooltip: {
                    enabled: false
                },
                series: [{
                    type: 'wordcloud',
                    data: words,
                    name: 'Occurrences',

                }],
                title: {
                    text: 'SENTIMENTAL WORDCLOUD',
                    y: 40,
                    style: {
                        color: '#ADB0D0',
                        fontFamily: 'Montserrat'
                    }
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function(event) {
                                let keyword = event.point.name
                                axios.all([
                                    axios.get(`/api/v1/tweets/@36,-115,7z?${keyword}`),
                                    axios.get(`/api/v1/tweets/@36,-115,7z/sentiments?keyword=${keyword}`)

                                ])
                                .then(axios.spread((tweets, sentiments) => {
                                    console.log(tweets);
                                    this.props.dispatch(handleKeywordTweets())
                                    console.log(sentiments);
                                }))
                                .catch(function(error){
                                    console.log(error);
                                })
                            }
                        }
                    }
                }
        }
        return (
            <ReactHighcharts config = {config}
            style={{ "min-width": "310px", "max-width": "800px", margin:" 0 auto"}}
            ></ReactHighcharts>
        );
    }
}

const mapStateToProps = (state) => {
    const { keywords } = state.places
    return { keywords }
}

export default connect(mapStateToProps)(WordCloud)

score 2 · Accepted Answer · answered Nov 18 '17 at 23:51

Notice that you are using a non-arrow notation function as the click handler:

click: function(event) {
    let keyword = event.point.name
        axios.all([
            axios.get(`/api/v1/tweets/@36,-115,7z?${keyword}`),
            axios.get(`/api/v1/tweets/@36,-115,7z/sentiments?keyword=${keyword}`)
        ]).then(axios.spread((tweets, sentiments) => {
            console.log(tweets);
            this.props.dispatch(handleKeywordTweets())
                console.log(sentiments);
            })).catch(function(error){
                console.log(error);
            })
        }

By using non-arrow notation, the function defines its own "this" value. However, an arrow function doesn't have its own "this" value, but instead it uses the value of the enclosing execution context (in your case, "this" refers to the React class WordCloud).

Long story short, try converting the handler to arrow notation, and also try to always use arrow notation as the previous notation is pretty much obsolete :)

I marked as the correct answer, but I don't have the level to upvote, sorry! Also, I still don't understand why non-arrow notation, the function defined its own "this" value, It's against the principle of "this" should points to the nearest object, right? — Han Jiang, Nov 20 '17 at 04:40
Arrow notation functions regard `this` as the `this` of the enclosing execution content, but non-arrow notation functions ALWAYS have their own `this` context. — Gilad Bar, Nov 20 '17 at 07:34

Cannot read property 'dispatch' of undefined with React-Highcharts

1 Answers1