Не удается прочитать свойство «отправка» неопределенного с помощью React-Highcharts

Я пытаюсь сделать так, чтобы мои данные серии имели событие click с избыточностью, однако у меня возникла проблема, когда я пытаюсь отправить свою функцию в обратном вызове, я использую библиотеку 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)

redux react-highcharts
person Han Jiang    schedule 18.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Обратите внимание, что вы используете функцию нотации без стрелок в качестве обработчика кликов:

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. Однако стрелочная функция не имеет собственного значения «это», а вместо этого использует значение окружающего контекста выполнения (в вашем случае «это» относится к классу React WordCloud).

Короче говоря, попробуйте преобразовать обработчик в стрелочную нотацию, а также старайтесь всегда использовать стрелочную нотацию, поскольку предыдущая нотация в значительной степени устарела :)

person Gilad Bar    schedule 18.11.2017
comment
Да, это проблема. Спасибо Спасибо спасибо! - person Han Jiang; 19.11.2017
comment
Я отметил как правильный ответ, но у меня нет уровня, чтобы проголосовать, извините! Кроме того, я до сих пор не понимаю, почему нестрелочная нотация, функция определила свое значение this, это противоречит принципу, что это должно указывать на ближайший объект, верно? - person Han Jiang; 20.11.2017
comment
Функции стрелочной нотации рассматривают this как this окружающего исполняемого содержимого, но функции без стрелочной нотации ВСЕГДА имеют свой собственный this контекст. - person Gilad Bar; 20.11.2017