[React] [flux] [EventEmitter]이 참조는 구성 요소에서 참조로 변경됩니다.

Question

React & Flux를 사용하여 구성 요소, 액션 및 상점이 있습니다.

저장소에서 이벤트를 구성 요소의 메서드로 전달할 때 내 구성 요소의 "this"참조가 "저장소"참조로 변경됩니다.

혹시 이런 일이 일어나는 이유를 아십니까?

가게는() 메소드 getAllVotes에서, 여기에 이벤트를 전달한다 : https://huit.re/voteStoreRow41

import { EventEmitter } from 'events'; 

import dispatcher from '../dispatcher/dispatcher.jsx'; 
import request from 'superagent'; 
import nocache from 'superagent-no-cache'; 

const BASE_URL = "http://odu.priv/ws"; 

class VoteStore extends EventEmitter { 
    constructor(){ 
     super() 
     this.votes = []; 
     this.voteComponent = {}; 

     dispatcher.register(this.handleActions.bind(this)); 
    } 

    getAll(){ 
     return this.votes; 
    } 

    setVotes(listVote){ 
     this.votes.push(listVote); 
     this.emit('change'); 
    } 

    getAllVotes(){ 
     this.emit('change'); 
    } 

그리고 구성 요소는 여기에이 이벤트를 처리 : https://huit.re/votesL33 어디 updateVote에서 voteStore의 심판을 "이"변화() 메소드를 .

import React from 'react'; 

import { Vote } from '../vote/vote.jsx'; 
import voteStore from '../../stores/voteStore.jsx'; 

import { getAllVote } from '../../actions/voteActions.jsx'; 

class Votes extends React.Component { 
    constructor(props) { 
    super(props); 
    console.log('const -> ', voteStore); 
    this.state = { 
     votes : voteStore.getAll() 
    }; 
    } 

    componentWillMount() { 
    voteStore.on('change', this.updateVote); 
    getAllVote(); 
    console.log("Votes ", this.state.votes); 
    } 

    /*componentWillUnmount() { 
    voteStore.removeListener('change',this.updateVote); 
    }*/ 

    updateVote(){ 
    console.log('this -> ',this); 
    console.log('voteStore -> ',voteStore) 
    this.setState({ 
     votes : voteStore.getAll() 
    }); 
    console.log('this.state',this.voteComponent.votes); 
    } 

은 내가 그냥 이해하지 못하는 것은 왜 더 이상 빨리 방법 가게에서 호출되는 "()는 getAllVotes"로 내 "이"심판하지 않을 경우 내 "투표"예. 이로 인해 아래 행의 "this.state"가 정의되지 않습니다.

미리 감사드립니다.

Answer 1

이 문제는 클래스에서 발생했습니다. 호출하려는 eventListener를 추가 할 때 투표하십시오. this.updateVote이 방법은 this.updateVote.bind(this)이고 가상 DOM에서 함수를 호출 할 때이 함수를 호출해야합니다.