Javascript 如何将我的react组件连接到回流存储？

我是一个新的反应和回流和现代JavaScript开发。努力学习。所以，我正在制作一个组件，它基本上是一个聊天窗口。包含行和输入框的列表。在输入框中键入内容并按enter键时，会将该行添加到列表中。我使用setState（）使其与pure React一起工作，现在我想使其使用回流存储。我的组件代码是这样的

import React from 'react';
import Reflux from 'reflux';

import ConsoleActions from '../actions';
import ConsoleStore from '../stores';

export default React.createClass({
  mixins: [Reflux.connect(ConsoleStore, "lines")],
  render() {
    var lines = this.state.lines.map(function(line) {
      return(<li>{line}</li>)
    });
    return (
       <ul>{lines}</ul>
       <input onKeyUp={this.enter}/>
    )
  },
  enter(e) {
    if (e.keyCode == 13) {
      ConsoleActions.addConsoleLines([e.target.value]);
      e.target.value = null
    }
  }
});

我的店是 从“回流”导入回流

import Actions from './actions';

export default Reflux.createStore({
  lines: [],
  listenables: Actions,

  getInitialState: function() {
    return [];
  },

  addConsoleLines(lines) {
    lines.forEach(line => {
      this.lines.append(line);
    });
  },

  clearConsoleLog() {
    this.lines = []
  }
});

---

不确定我缺少了什么，reflow.connect（）应该将我的存储连接到state，但我得到“TypeError:this.state.lines未定义”错误。

追加行时应该触发更改事件

export default Reflux.createStore({
  listenables: [Actions],
  lines:[],
  addConsoleLines(lines) {
    let self=this;
    lines.forEach(line => {
      self.lines.append(line);
    });
    self.trigger('change',self.lines);
  },

  clearConsoleLog() {
    this.lines = []
  }
});

在您的组件中，侦听更改事件

export default React.createClass({
  mixins: [Reflux.connect(ConsoleStore, "onChange")],
  onChange(event,_lines){
         this.setState({lines:_lines});
    }
  render() {
    var lines = this.state.lines.map(function(line) {
      return(<li>{line}</li>)
    });
    return (
       <ul>{lines}</ul>
       <input onKeyUp={this.enter}/>
    )
  },
  enter(e) {
    if (e.keyCode == 13) {
      Actions.addConsoleLines([e.target.value]);
      e.target.value = null
    }
  }
});

---

从哪里

self

进入画面？哎呀。。。太多的python了。但是在store中用这个替换self之后，我得到了相同的错误。在store中添加了init（）以将行设置为[]，结果仍然相同。connect（）应该透明地将store绑定到组件状态。至少文件中是这样写的。“如果您只想将组件的状态更新为数据存储所传输的任何内容，则可以使用Reflux.connect（listener，[stateKey]）作为mixin。如果您提供stateKey，则状态将通过此.setState（{：data}）更新，否则将通过此.setState（data）更新。”@MadWombat根据您的命令进行更新。仍然有错误吗？我已经更新了代码，你是对的，文档实际上说connect（）需要在存储上定义getInitialState（）。现在我得到“TypeError:\u this.lines未定义”。我已经在我的帖子中更新了代码出现错误？好的，我用lines.forEach（this.lines.push，this）替换了它；这似乎奏效了。现在我得到TypeError:self.trigger不是一个函数

export default React.createClass({
  mixins: [Reflux.connect(ConsoleStore, "onChange")],
  onChange(event,_lines){
         this.setState({lines:_lines});
    }
  render() {
    var lines = this.state.lines.map(function(line) {
      return(<li>{line}</li>)
    });
    return (
       <ul>{lines}</ul>
       <input onKeyUp={this.enter}/>
    )
  },
  enter(e) {
    if (e.keyCode == 13) {
      Actions.addConsoleLines([e.target.value]);
      e.target.value = null
    }
  }
});

export default Reflux.createStore({
  listenables: Actions,

  getInitialState() {
        return [];
    },

  addConsoleLines(lines) {
   ...
  }