无法使用 React-Highcharts 读取未定义的属性 'dispatch'

Question

我尝试让我的系列数据具有 redux 的点击事件，但是，当我尝试在回调中调度我的函数时遇到问题，我正在使用 React-Highcharts 库，我也尝试访问安装组件后的图表，但我不确定该怎么做，因为没有相关示例。

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)

Answer 1

请注意，您正在使用非箭头符号函数作为点击处理程序：

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);
            })
        }

通过使用非箭头符号，该函数定义了它自己的 "this" 值。但是，箭头函数没有自己的 "this" 值，而是使用封闭执行上下文的值（在您的情况下，"this" 指的是 React class WordCloud） .

长话短说，尝试将处理程序转换为箭头符号，并尝试始终使用箭头符号，因为以前的符号已经过时了:)

无法使用 React-Highcharts 读取未定义的 属性 'dispatch'

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

redux

react-highcharts

无法使用 React-Highcharts 读取未定义的属性 'dispatch'