javascript - ReactJs + Reflux//触发在null组件上执行？

Question

我正在尝试在我的 ReactJs 应用程序中使用 Reflux。

我遇到一个问题，即监听数据存储的组件正在空组件实例而不是实例化的实际组件上执行回调。

调用操作toggleUserBar后，将调用数据存储并执行触发器。在组件Sidebar中，调用了回调但组件状态为空:

Uncaught TypeError: Cannot read property 'sd' of undefined

知道我做错了什么吗？

actions.tsx

var Reflux = require('reflux');
var RQ = {};

RQ.actions = Reflux.createActions([
    "toggleUserBar"
]);

window.RQ = RQ;

store.tsx

RQ.store = Reflux.createStore({
  listenables: [RQ.actions],
  init: function() {},
  onToggleUserBar: function() {
      this.trigger();
  }
});

sidebar.tsx

import * as React from "react";
import * as ReactDOM  from "react-dom";

const LeftNav = require('material-ui/lib/left-nav');
const Menu = require('material-ui/lib/menu/menu')

interface ISidebarProps extends React.Props<any> {

}

interface ISidebarState extends React.Props<any> {
    shown: Boolean;
    sd: any;
}

export class Sidebar extends React.Component<ISidebarProps, ISidebarState> {

  unsubscribe: any;

  constructor(props: ISidebarProps) {
      super(props);
      this.state = { shown: true, sd: null };
  };

  componentDidMount() {
    this.unsubscribe = RQ.store.listen(function() {
      this.state.sd.setState({ open: true });
    });
  };

  componentWillUnmount() {
      this.unsubscribe();
  };

  render() {

    let menuItems = [
      { route: 'get-started', text: 'Get Started' },
      { route: 'customization', text: 'Customization' },
      { route: 'components', text: 'Components' }
    ];

    return (
      <LeftNav ref={(c) => this.state.sd = c} docked={false} openRight={true} menuItems={menuItems} />
    );

  };

}

侧边栏组件在另一个组件中渲染:

<ComSidebar ref={(c) => sdref = c} />

如果我手动调用sdref.state.sd.open = true，它就可以正常工作。

Answer 1

JavaScript 中的 this 关键字通常会以令人惊讶的方式表现。您已经找到了主要的一个。

当您使用 function 关键字创建内部函数时，它不会获得与封闭函数相同的 this 变量。这意味着，在您的代码中:

componentDidMount() {
  // "this" out here is your component instance
  this.unsubscribe = RQ.store.listen(function() {
    // "this" in here is NOT the same - undefined, as you're seeing
    this.setState({ open: true });
  });
};

有多种方法可以解决此问题。由于您使用的是 ES6，最简单的可能是使用箭头函数 - 箭头函数显式保留其封闭函数的 this 引用。它看起来像这样:

componentDidMount() {
  this.unsubscribe = RQ.store.listen(() => {
    // now it's the same "this"
    this.setState({ open: true });
  });
};

如果您没有使用 ES6，您可以通过在该函数上调用 bind 来获得相同的行为(这允许您指定 this 变量，以及任何参数):

componentDidMount() {
  this.unsubscribe = RQ.store.listen(function() {
    this.setState({ open: true });
  }.bind(this)); 
  // by calling bind, we are explicitly setting the "this" variable here
  // passing it from outer scope to inner scope
};