Question

我有一个组件，一个动作和一个商店，使用React＆amp;通量。

当我将商店中的事件发送到我的组件中的方法时，我的组件中的“this”引用更改为“Store”引用。

你们是否知道为什么会这样？

商店在此处调度事件，在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其中“this”在updateVote（）方法中更改为voteStore的ref。

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”ref不再是我的“投票”实例。这导致下面一行的“this.state”未定义。

提前致谢。

Answer 1

当您添加正在调用的this.updateVote的eventListener时，问题来自您的类投票，当您从虚拟DOM调用函数时，应该以这种方式调用此函数this.updateVote.bind(this)。

[React] [flux] [EventEmitter]此引用在组件中更改为存储ref

1 个答案: